2021-04-28

百度搜索框的分析

开发工具与关键技术： jquery
作者：黄富健
撰写时间：2021/4/28
1.首先我们先展示一下效果

2.我先给大家看一下html部分

布局思路：用一个大的div包着一个div和ul。div里面放一个input标签;用于我们用户输入。ul这里我们会在jq中动态的添加。
3.css部分

css部分讲解：我在body设置了flex，让他们水平居中显示，垂直居中显示，再给ul标签设置了边框样式，随后让ul隐藏起来。
4.jq代码如下
jq代码思路:
（1）因为我们的ul标签中是要动态添加的，所以这要用到数据库里面的数据来进行动态添加的。在这里我的做法是创建一个数组，数组里面预先设置好所匹配的内容，
（2）我这里已经预先给input命名了一个类。给类名$(.import)绑定键盘事件，通过$(import).val()来获取用户键盘所输入的值。
（3）接着对我们预先设定好的数组content进行遍历，然后用数组content里面的值(n)进行indexOf()来检索用户输入值$(import).val()，如果检索不到用户输入的值则会返回-1，这里我们设置一个变量res来接收返回值。‘注意我们这里是用content里面的值(n)来检索，不是用content数组进行检索的’
（4）进行对res判断。如果res不等于-1的话，就新创建一个li标签，再把coutentn里面的值(n)加入到新建li标签的文本中。我们这里要对新建li进行拼接，在遍历的外面命名一个变量str，在res不等于-1判断语句中进行拼接 str
（5）最后我们就再做一个判断，判断用户输入的值是否为空，如果为空就ul标签下面的子元素清空，ul隐藏。否则的话将str追加到ul标签后面

这是我所做的百度搜索框案例步骤，所以我要分享给你们，希望可以帮助到你们。
以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！