Algolia Search - 使用Javascript实现前端实时搜索

在网站开发中，很重要的一个功能那就是搜索了。对于一个访问量很大的网站来说，对于所有的搜索请求直接读取数据库来完成将会造成非常大的负荷。两种办法可以有效地解决以上问题，种就是缓存，memcached,redis等都很有名气，在这里就不予赘述了。

那么第二种就是使用云搜索。什么是云搜索？类似于CDN，我们把数据库内可以用于被搜索的信息推送至云端，然后用户在我们的网站进行搜索时，实际上搜索请求并没有发送给我们的服务器，而是被传递到云服务器进行搜索，并返回相应的结果。这样的解决方案可以大大降低网站的延迟，并提高应用的性能。现在比较有名的Algolia就提供了云搜索的服务。

具体办法是我们将数据库的信息以JSON的格式上传到Algolia服务器，然后通过相应的API进行搜索。搜索既可以是实时的（采用Javascript调用Algolia API），也可以是后端的（使用PHP调用Algolia API）。

图片中可以看到，我使用了javascript实现了前端实时搜索，这样不仅高效，而且对用户友好。Algolia的免费许可允许上传10,000条JSON数据，每月允许100,000次操作（包括上传和搜索），还是相当不错的。今天我们将要使用Javascript来实现Algolia的实时搜索功能，框架我选用的是新的jQuery。好了，那我们这就开始。首先前往Algolia官网：>http://www.algolia.com注册好之后，我们就可以登录dashboard控制和管理我们的数据了。

注意，我们在上图中左边第三个钥匙按钮中，可以找到我们需要的API Keys：

我们需要的是Application ID，Search-Only API Key和Admin API Key。注意：Admin API KEY一定不要放在js里，因为这个key是用来上传，删除和操作我们的云端数据的，所以一定要保管好。

有了key之后，当然就要着手开始上传我们的数据了。一个很简单的方法就是先把我们数据库数据导出成JSON文件后，使用algolia API的上传功能，直接上传至服务器。不过如果数据进行了更新，并不能实时反应在搜索中。我将会在另一篇文章中介绍如何使用Laravel Scout来进行数据的实时上传与更新。

首先我们需要把数据库的数据push到云端服务器。假设我们的数据库里有一个叫contacts的table，包含了客户联系人的数据，我们已经将这个table导出成JSON形式的文件：contacts.json。有了这个JSON文件后，我们就可以着手开始push数据到云端了。现在我们新建一个js文件，并填入以下代码：

var index = client.initIndex('contacts');
var contactsJSON = require('./contacts.json');

index.addObjects(contactsJSON, function(err, content) {
if (err) {
console.error(err);
}
});

可以看到，以上的代码中，我们要建立一个叫contacts的索引，这个索引名称将在以后的搜索中使用到，每次搜索contacts table中的数据时，我们都需要先call一次client.initIndex('contacts')。
剩余的代码就是将我们的JSON文件上传到algolia服务器。

好了，数据库的数据我们已经上传到服务器端了，现在我们就可以开始搜索了！首先我们需要引入algolia的js库：

<script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
1
接着我们新建一个叫instant-search的js文件，然后添加以下代码：

var client = algoliasearch("Application ID", 'Search-Only API Key');
var contact_index = client.initIndex('contacts');

var search_input_string = 'some-contacts-to-search';

contact_index.search(search_input_string, function (err, contacts) {
for (var i = 0; i < contacts.hits.length; i++) {
// Code to deal with each contact
}
});

我们可以看到，首先我们需要我们的Application ID及Search-Only API Key来初始化，接着我们使用contacts这个索引来搜索。search_input_string在这里为了方便说明我用的是固定的字符串，而实际上我们应该动态获取搜索框中的字符串来进行实时搜索。contact_index.search这个函数会将搜索到的结果放在contacts.hits中，所以我们可以使用一个loop来处理每一个返回的结果，比如把每一个结果添加上相应的<a></a>并加入到搜索结果的list中。

我在CodePen上做好了一个instant-search的template：

https://codepen.io/lgyaxx/project/full/XmYyBX/

方便大家观看效果。另外我把代码上传到github了，包括了instant-search的逻辑。大致的概念就是每当搜索框有新的input，那么记录下这个input，等待一定的时间（例如1s或者2s），再次获取input，看跟之前的搜索串是否有不同，如果有不同，那么就搜索新的字符串，如果没有不同，那么就搜索旧的字符串。这样的延时机制可以有效地避免用户在搜索字符串还没打完的时候就进行多次搜索了。

https://github.com/lgyaxx/eagolia-search

当然，我使用了jQuery框架并且结合了Bootstrap 4，大家可以自己发挥来实现所需的UI。还有需要注意的是，Algolia免费版需要把logo放在搜索结果旁边，这是官方要求，切记。