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
里面涉及的使用案例，方法功能真的是太豐富了，仍然有待發現研究......
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/45590.html
標籤：JavaScript
下一篇：reactDOM