algoliasearch-helper

algolia 是一个通过 Saas 模式提供网络搜索的产品，在 2012 年创办，主要是在手机上进行离线搜索，并在此之后使用外部托的方式为客户的网站提供了网络搜索服务，以及 REST API 的提供，涵盖了大量主流语言。与同类型的 Elasticsearch 相比起来 Algolia 更加的轻量级，并且与站点达成了高度耦合，不太依赖数据库，而是更加更可自定义的 RESTAPI 的方式进行提供。

且 algolia 高度活跃在诸如开源社区中获得了一大批开发者的青睐，而本文主要通过 algolia 在原生的 JavaScript 环境下的使用，通常此类都是面向大前端时代下的产物，但通过 algoliasearch-helper.js 可以解决这种尴尬问题。

在此之前我们需要了解 algoliasearch-helper.js 主要作用，首先需要认识到 helper 主要用于创建基于搜索的应用程序，以此来帮助开发者构建属于自己的应用程序的搜索结构，同时还提供了更加高级的 API 来方便访问高级搜索过滤器。

通过 algoliasearch-helper 我们可以实现在站点中加入 helper，以及在没有 js 框架的情况下根据 algolia 来来建立根据用户所需的界面。

获取 API

首先我们需要在 algolia 页面中找到 appliacation 以及 apikey 和 IndexNeame，以保障你在使用前已经构建了索引，即 IndexName，之后的 algolia 会使用该索引的 json 数据来进行查询。

添加时格式为 json，届时 algolia 会各种提示你进行添加或上传数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

[
    {
    "name":"针对本年度中旬纽约时报针对中国的境外社交平台舆论攻击分析",
        "author":"LAB",
        "date":"2022/01/11",
        "class":"会议沙龙",
        "url":"http://src.chnhonker.com/index.php?m=&c=blog&a=view&id=2"
    },
    {
        "name":"关于 3.99MB 恶意程序进一步扩展与深入分析",
        "author":"LAB",
        "date":"2022/01/12",
        "class":"会议沙龙",
        "url":"http://src.chnhonker.com/index.php?m=&c=blog&a=view&id=3"
    }
]

为了方便演示我们通过上述两条数据来进行插入，同时使用 Algolia 还需要在项目中使用 algolia-client 来引用 algolia.js 库，需要在页面中引入两行 js 库：

1
2

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/g/algoliasearch@3(algoliasearchLite.min.js),algoliasearch.helper@2"></script>

与 Elasticsearch 和 Kibana 类似，Elasticsearch 用于存储搜索和分析，同时 Kibana 用于可视化数据的操作，来作为 Es 学习的第一步，同样的我们需要在 algolia 中 create index，并 add data，通过下述 code 进行输出：

1
2
3
4

<pre id="jsonecho"></pre>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/g/algoliasearch@3(algoliasearchLite.min.js),algoliasearch.helper@2"></script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

var applicationID = "you_appID";
var apiKey = "you_apiKey";
var index = "you_Index";

var client = algoliasearch(applicationID, apiKey);
var helper = algoliasearchHelper(client, index);

helper.on('result', function(content) {
    renderHits(content);
});

function renderHits(content) {
    $('#jsonecho').html(JSON.stringify(content, null, 2));
}

helper.search();

通过 helper.on("result") 来输出来自 Algolia 的 Json 数据并使用 helper.search() 来执行一个空搜索。

解析 API

根据 algoliasearch-helper.js 官方文档中的例子，我们通过Searchable attributes 中设置的 “_highlightResult” 来进行获取数据并解析。

如果要达到一个搜索的目的，我们需要根据 API 内容中 hits 进行返回数据，以此来获取下文，即构造代码为：

1
2
3
4
5
6
7
8
9
10
11
12

function renderHits(content) {
    $('#container').html(function() {
        return $.map(content.hits, function(hit) {
            return '<li><a href=' + hit._highlightResult.url.value + '>' +hit._highlightResult.name.value + '</a></li>';
        });
    });
}

$('#search-box').on('keyup', function() {
    helper.setQuery($(this).val())
        .search();
});

并将前端 code 进行绑定，方便解析搜索和显示数据：

1
2
3

<input type="text" autocomplete="off" id="search-box"/>

<ul id=container></ul>

通过 search-box 来监听输入更改以达到查询并触发更新的效果，在调用 setQuery 时通过 helper 手动触发搜索，同时也可以为其写入样式，如关键词高亮同样可以为其加上样式。这主要是通过 algolia 所提供的分词效果，与 Elasticsearch 中提供的分词方法类似，都是通过 <em> 元素来进行分词的。

1
2
3

#container em {
    background: red;
}