《Elastic Stack 实战手册》——三、产品能力——3.5 进阶篇——3.5.18.Enterprise Search —— 3.5.18.2.Site Search（上） https://developer.aliyun.com/article/1226777
二、在个人网站上增加搜索框
到目前为止，我们所有的工作都在 swiftype.com 网站上完成的，并且完成了一个搜索引擎的创建，接下来我们要在自己的个人网站应用中应用搜索功能，也就是我们需要为我们的网站上添加上一个搜索框。
这个步骤也很简单，只需要在你的网站上增加几行代码即可，如下是完整示例代码：
<html> <head> <title>The Most Minimal Seeking</title> <scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script type="text/javascript"src="jquery.swiftype.search.js"></script> <script type='text/javascript'> $(function() { $('#st-search-input').swiftypeSearch({ resultContainingElement: '#st-results-container', engineKey: 'swiftype-example-api' }); }); </script> </head> <body> <form> <input type="text" placeholder="Search" id="st-search-input" /> </form> <div id="st-results-container"></div> </body> </html>
那如何在我们已有的网站中应用呢？按照下面代码块分解对应使用即可。
首先，需要在页面 标签中引入搜索需要的 js（在 Github 可以下载源码：https://github.com/swiftype/swiftype-faceted-search-example）：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script type="text/javascript"src="jquery.swiftype.search.js"></script>
然后，在页面标签中增加搜索 form 表单和负责展示搜索结果的 st-results-container div 标签，通过下面代码块，就可以让我们的网站页面上出现搜索框：
<form> <input type="text" placeholder="Search" id="st-search-input" /> </form> <div id="st-results-container"></div>
同时为了能够使得我们的搜索框能够正确运行，我们必须首先在 app.swiftype.com 网站得到我们的 Engine Key，填写到搜索框的触发事件上：
<script type='text/javascript'> $(function() { $('#st-search-input').swiftypeSearch({ resultContainingElement: '#st-results-container', engineKey: '你的enginekey' }); }); </script>
复制我们网站的 Engine key：
我们的网站显示如上，多了一个搜索框。这个时候我们在上面的搜索中输入我们想要的关键词，比如“线程”：
我们可以看到当我输入“线程”后，在我们的网页上出现了我们所搜索的一些结果，我们可点击其中任意一项就会进入我们的对应的页面中。
至此，其实我们的网站其实已经完成了搜索功能的提供。下面会再介绍一些可以提升搜索体验的高级配置。
《Elastic Stack 实战手册》——三、产品能力——3.5 进阶篇——3.5.18.Enterprise Search —— 3.5.18.2.Site Search(下) https://developer.aliyun.com/article/1226774
