Algolia Search

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

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