模仿淘宝JSsearch搜索下拉深度使用

我们首先给出JSsearch程序的相关源代码：https://gitee.com/skyogo/JSsearch

我们下载JSsearch1.0社区版

下载后，我们会下载一个类似淘宝的购物页面

然后，当我们打开这个页面时，我们会发现它是这样的

此时，我们关闭页面，将我们的jssearch.js复制到淘宝页面根目录下的js文件夹中

复制后，我们将其引入html页面(写在正文的底部)

script src=' http : js/jssearch . js '/script script/script然后我们将这段代码写在上面的第76行(在输入标记下面)

Div id='搜索-推荐'没有搜索结果/div。然后我们打开css/index.css文件，并在其中编写这个css样式表

#搜索-推荐{ height: 40px宽度： 580 px；绝对位置：top: 110pxborder: 1px灰色固体；左填充left: 20px盒子尺寸：边框盒子；padding-top : 11px；font-size : 15px；cursor:指针；背景：白色；}运行html页面，发现搜索框下有一个额外的框

至此，我们的html和css代码就完成了。接下来，让我们编写js代码

现在我们关闭页面，打开开发工具，在index.html找到大约2754行的脚本标签，所以我们现在必须在其中编写查询代码

首先，我们编写以下代码：(反复获取输入框中的值)

var last value=document . getelementbyid(' search-in ')。价值；SetInterval(function(){ }，10)然后，我们在var下写一个判断语句，判断输入框的值是否发生了变化。

if(lastValue！=document . getelementbyid(' search-in ')。值){}接下来，我们写下如果：

last value=document . getelementbyid('搜索范围')。价值；这段话意味着重复判断。如果输入框的值发生变化，则重新分配该值

然后，我们在下面再次写道：

if(last value==null | | last value==' '){ document。getelementbyid(' search-recommend ')。innerhtml='无搜索结果'；}else{}是判断如果输入框的当前值为空，那么让他显示“无搜索结果”

然后，我们在else中写道：

var new item list=JSsearchByKeyWord(item list，last value)；If (newitemlist [0]==未定义){document。getelementbyid(' search-recommend ')。innerhtml='无搜索结果'；}else{}此时，我们调用了JSsearch的关键字搜索方法。哦，对了，我们还没有写itemList数组

然后将光标移动到setInterval的顶行，并写入：

Var itemList=['光表'，'情侣表'，'日韩表'，'表安心'，'瑞士表'，'陶瓷表'，'电子表'，'欧米茄'，'钢带表'，'空心机械表'，'斯沃琪'，'天梭' itemList是我们所有产品的集合

现在将光标移回，移到else，并写下：

document . getelementbyid(' search-recommend ')。innerHTML=NewItemList[0]；此时，我们将再次打开html文件，然后在输入框中输入内容，我们会发现已经有关联了！

当然，这只是一个雏形，我们还有一个BUG需要解决，那就是当你输入一个包含多个字符串的字符时，他不一定会推荐你想要的那个。JSsearch已经帮助我们思考过这个问题了，这里就不写了。如果你想解决这个BUG，可以参考JSsearch的描述文档自己解决！