How can I truncate paragraphs in the search results?

I am using my own search widget by using the instantSearch.js on my blog website. When I am taking the paragraph in my hits the length of the paragraph is very big(you can see below)

I want to show this para in search result in 100-120 words only.

My search code

const searchClient = algoliasearch(
  "appId",
  "apiKey"
);

const search = instantsearch({
  indexName: "articles",
  searchClient,
});

search.addWidgets([

  instantsearch.widgets.configure({
    hitsPerPage: 4,
  }),

  {
    init(opts) {
      const helper = opts.helper;
      const input = document.querySelector("#search-input");
      input.addEventListener("input", ({
        currentTarget
      }) => {
        helper
          .setQuery(currentTarget.value)
          .search();
      });
    },
  },
  {
    render(options) {
      const results = options.results;
      document.querySelector("#searchHits").innerHTML = results.hits
        .map(
          (hit) => `
                <div class="alert alert-light">
                    <a class="tag_11" href="${instantsearch.highlight({
                      attribute: "url",
                      hit,
                    })}">
                       <h3 class="h6 fw-bold">${instantsearch.highlight({
                         attribute: "title",
                         hit,
                       })}</h3>
                       <p class="h6">${instantsearch.highlight({
                         attribute: "html",
                         hit,
                       })}</p>
                    </a>
                 <span class="small me-4 font-fira cb-search-input-shortcut-post"><kbd class="bg-body">↵</kbd></span>
                </div>
            `
        )
        .join("");
    },
  },
]);

search.start();

I want to show search results like this:

This can be achieved using our snippeting functionality: Highlighting and Snippeting | InstantSearch.js | Building Search UI | Guide | Algolia Documentation

This can be done via the API or the Dashboard (Indices > Configuration > Snippeting)

I have configured inside the Indices > Configuration > Snippeting but nothing changed :pensive:


Check out this configuration for InstantSearch and see if it helps: snippet | InstantSearch.js | API parameters | API Reference | Algolia Documentation

Newbie in Javascript. Tried a lot to implement this in my code but unable to do so…

This is my code. Please help if you can.

const searchClient = algoliasearch(
  "applicationId",
  "apiKey"
);

const search = instantsearch({
  indexName: "articles",
  searchClient,
});

search.addWidgets([
  {
    init(opts) {
      const helper = opts.helper;
      const input = document.querySelector("#search-input");//search-input is id of input box
      input.addEventListener("input", ({ currentTarget }) => {
        helper.setQuery(currentTarget.value).search();
      });
    },
  },
  {
    render(options) {
      const results = options.results;
      document.querySelector("#searchHits").innerHTML = results.hits //id searchHits is place where hits are going
        .map(
          (hit) => `
                <div class="alert alert-light">
                    <a class="tag_11" href="${instantsearch.highlight({
                      attribute: "url",
                      hit,
                    })}">
                       <h3 class="h6 fw-bold">${instantsearch.highlight({
                         attribute: "title",
                         hit,
                       })}</h3>
                       <p class="h6">${instantsearch.highlight({
                         attribute: "html",
                         hit,
                       })}</p>
                    </a>
                 <span class="small me-4 font-fira cb-search-input-shortcut-post"><kbd class="bg-body">↵</kbd></span>
                </div>
            `
        )
        .join("");
    },
  },
]);

search.start();

I changed from

<p class="h6">${instantsearch.highlight({
                         attribute: "html",
                         hit,
   })}</p>

to

<p class="h6">${instantsearch.snippet({
                         attribute: "html",
                         hit,
 })}</p>

and it works! :vulcan_salute:

1 Like