在我们逛网站的时候经常会遇到搜索框之类的，我们在输入想要搜索的内容时，下面会弹出来一些提示，而这样的操作，我们用JavaScript既可以实现，下面我们来讲解一下如何实现的吧！
写这个功能的时候，细节方面比较讲究，稍微不注意点页面就会出现各种不适.
先看一看效果: 
当我在输入框中输入一个字符，后面就会出现相应的内容。直接点击我们就可以链接到相应的文档区域非常适合站内搜索和导航。
下面我摆出完整的测试代码.
Document
我的编码思路:
1、表单输入框。
2、肯定要对表单输入框的值变化进行监控。通过添加事件oninput
3、怎么出现搜索值而且 它能个输入值练习在一起。
把搜索值放到一个数组中，通过indexOf检索数组中元素是否包含输入框值，将这些值筛选出来.这样就把输入框值和搜索框值联系在一起。
将满足条件的值放到创建的p元素内，在把这个p元素放到wrap中。
vue-store高仿小米商城下载本项目前后端分离，前端基于Vue+Vue-router+Vuex+Element-ui+Axios，参考小米商城实现。后端基于Node.js(Koa框架)+Mysql实现。前端包含了11个页面：首页、登录、注册、全部商品、商品详情页、关于我们、我的收藏、购物车、订单结算页面、我的订单以及错误处理页面。实现了商品的展示、商品分类查询、关键字搜索商品、商品详细信息展示、登录、注册、用户购物车、订单结算
4、这时你可能会碰到第一个重大的问题，不断改变输入框的值，wrap中的p元素越来越多，而且是不断的重复。
怎么办?
再建立一个数组，将哪些符合条件都arr1数组 元素放到这个数组内，然后写一个判断，判断每次帅选出来的值是否数组arr2，不属于就添加
这样数组arr2中就不会被添加重复的 元素。
5、然后你会发现为什么元素还是在重复显现。这属于元素残留问题，即没有删除以前的元素。每次变化之后你要删除已经在wrap中创建的元素，否则他们会一直存在。这是使用你要通过getElementsByTagName()来获取元素并移除。
6、这样大致的功能已经完成，接下来就是一些小细节，不过就是这些小细节磨时间。
一个是输入框空值情况也会出现搜索值。arr1[i].indexOf(val)到底是大于0还是-1呢?原来空值返回值也为0，这样也会执行创建元素的代码，所以我在arr1的每个字符串前加了一个空格。
另一个是使用 getElementsByTagName()获取元素要注意的要点，知道很重要，我就是被这个问题卡了很长事件。上面都代码区域有详细讲解。
相关推荐：
