First. 什麼是 algolia search?

根據algolia官方網站自我闡述：Algolia是一個託管搜尋引擎，提供全文，數字和多面搜尋，能夠從第一次擊鍵中提供實時結果。

Algolia強大的API可讓您快速無縫地在網站和移動應用程式中實施搜尋。我們的搜尋API每月為成千上萬的公司提供數十億條查詢，可在全球100ms之內提供相關結果。

簡單直白的說就是一個提供雲搜素服務的第三方平臺。我們通過呼叫algolia的feed介面把一些我們想要呈現給使用者的內容上傳到algolia平臺，可以是產品，文章，圖片等等資訊。

然後我們可以在自己的網站上通過構建前端或者後端搜素方式，把使用者的關鍵詞提交給algolia,同時algolia在很短的時間內容作出迴應，返回給我們與搜尋有關的內容。

Second. 建築使用者搜尋介面

Algolia在官方文件中推薦我們使用InstantSearch(即時搜尋)，這種搜尋方式提供的效果確認給人一種很即時的感覺，沒得使用者鍵盤鍵入一個字母，algolia都會返回結果集。

InstantSearch屬於前端搜尋範疇，構建前端搜尋algolia支援的語言還是比較豐富的例如 js,React,Vue,ios...

使用js構建前端搜尋根據文件真的是十分的方便，只需把文件中的案例程式碼複製貼上稍做改動就可以達到自己想要的結果，不過僅僅是針對與比較簡單的單個Index搜尋。

對於同時搜尋多個index的需求就比較複製麻煩了，index指的是我們在algolia後臺設定的搜尋內容分類，每一個index可以包含一種搜尋內容，比如 article_index,product_index,

faq_index,當我們向algolia上傳內容時就需要指明feed到哪個index.

構建前端搜尋時algolia把每個小功能都封裝成一個小部件，每個小部件中的引數說明也都十分明確，所以呼叫起來比較方便。

根據文件 ：

const search = instantsearch({
  indexName: 'instant_search',
  searchClient: algoliasearch(
    'YourApplicationID',
    'YourSearchOnlyAPIKey'
  ),
});

// Add widgets
// ...

search.start();
 

這樣一個定義就開啟了使用algolia instantsearch,當然在這之前必須以及引入了algolia的基礎js庫，同時html中也要包含algolia所需要的內容渲染html，algolia會自動把返回的結果集

組裝成固定的html填充入固定的html中，當然我們可以自己設定需要組裝的結果集html結構

instantsearch.widgets
  .index({ indexName: 'instant_search' })
  .addWidgets([
    // Add widgets
    // ...
  ]);

向instantsearch中新增需要搜素的index

instantsearch.widgets.searchBox({
  container: '#searchbox',
});

指定頁面中搜索容器的ID，新增搜尋容器時有很多引數可供配置如下

instantsearch.widgets.searchBox({
  container: string|HTMLElement,
  // Optional parameters
  placeholder: string,
  autofocus: boolean,
  searchAsYouType: boolean,
  showReset: boolean,
  showSubmit: boolean,
  showLoadingIndicator: boolean,
  queryHook: function,
  templates: object,
  cssClasses: object,
});

每一項配置具體代表什麼，可以去文件中詳細研究：https://www.algolia.com/doc/api-reference/widgets/search-box/js/

從官方文件可得知新增完搜尋容器後，algolia會自動填充一段html進入指定的id容器中，可通過配置更改部分填充的html

如果想自定義這段html也是可以的，不過不過比較麻煩，也可以在html插入完成後通過js加入自己想要的html，

關於觸發搜尋端的小部件還有好幾個例如：configure，configureRelatedItems，panel，autocomplete，voiceSearch

但並一定都需要用到，根據自己的需要去選擇一種簡單快捷都方式。

Third. 下面介紹一下返回結果集的小部件

最重要的一個小部件hits，有關它的設定都是用來存放並現實結果集的

instantsearch.widgets.hits({
  container: string|HTMLElement,
  // Optional parameters
  escapeHTML: boolean,
  templates: object,
  cssClasses: object,
  transformItems: function,
});

每一項配置都會對結果集的輸出顯示造成影響

container : 存放結果集的html容器

escapeHTML : 是否從匹配字串值中轉義HTML實體

templates : 結果集列表顯示的html

cssClasses : 要覆蓋的基礎預設的css類

transformItems :接收專案，並在顯示它們之前呼叫它。應該返回一個形狀與原始陣列相同的新陣列。在對映要轉換的專案以及刪除或重新排序專案時很有用

程式碼案例：

instantsearch.widgets.hits({
  container: '#hits',
  escapeHTML: false,
  cssClasses: {
    root: 'MyCustomHits',
    list: ['MyCustomHitsList', 'MyCustomHitsList--subclass'],
  },
  transformItems(items) {
    return items.map(item => ({
      ...item,
      name: item.name.toUpperCase(),
    }));
  },
  templates: {
    empty: 'No results for <q>{{ query }}</q>',
    item: `
      <h2>
        {{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}
      </h2>
      <p>{{ description }}</p>
    `,
  },
});

關於結果集還有高亮顯示小部件很實用，可以把搜尋出來的關鍵字突出顯示

Instantsearch.highlight（{
   attribute：string，
   hit：object，
  //可選引數
  highlightTagName：string，
}）;
instantsearch.widgets.hits({
  container: '#hits',
  templates: {
    item: `
      <h2>{{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}</h2>
      <p>{{ description }}</p>
    `,
  },
});
instantsearch.highlight({
  // ...
  attribute: 'actor.name',
});

被突出顯示內容會被套上一個mark標籤，然後就可以去通過css自定義想要高亮顯示的樣式拉。

關於snippet小部件也很實用，它的設定是用來控制返回內容的，可以指定返回帶有關鍵字的內容片段，

就像是隻顯示帶有關鍵字的部分精簡內容。

instantsearch.snippet({
  attribute: string,
  hit: object,
  // Optional parameters
  highlightedTagName: string,
});
search.addWidgets([
  instantsearch.widgets.configure({
    attributesToSnippet: ['description'],
  })
]);

此外還有很多豐富功能的小部件，可以去https://www.algolia.com/doc/api-reference/widgets/instantsearch/js/官方文件仔細研究

掌握以上說明案例，基本已經可以使用algolia去實現搜尋功能拉。

但在實際開發中我遇到了很棘手的問題，根本就找到可以實現我想要的效果的小部件

我想要實現的效果，一次關鍵詞搜尋輸入，去搜素四個index的內容，即返回四個不同的結果集，然後根據這四個不同結果集的內容的數量，

以及是否有結果去渲染顯示不同css樣式的模版。比如說有8個產品，或者有6個產品，或者沒有產品結果集都會顯示不同的樣式。

最終通過不斷的檢視官方文件，我發現了一個 helper 助手，這真是一個 極好的 助手，它可以幫我去觸發搜尋，拿到結果集，拿到結果集之後

我就不在用algolia自帶的模版渲染了，將其隱藏，通過這些結果集我去自己拼接html，去新增不同樣式類名，從而達到效果。

關於helper助手的文件內容 ：https://community.algolia.com/algoliasearch-helper-js/reference.html#results

裡面涉及的使用案例，方法功能真的是太豐富了，仍然有待發現研究......