WebApi入门第八章（模拟百度搜索框 ）

body {

font-size: 20px;

}

.box {

width: 600px;

height: 40px;

margin: 200px auto;

position: relative;

}

#txt {

width: 498px;

height: 38px;

border: 1px solid #ccc;

font-size: 20px;

}

#search {

width: 100px;

height: 40px;

}

#keywords {

position: absolute;

top: 40px;

left: 0;

background-color: #6cf;

list-style: none;

width: 500px;

}

li {

line-height: 24px;

}

思路分析

---

思路分析

补充技术：用户输入的事件 oninput onkeyup onkeydown

只要用户输入内容：就会触发事件

1. 获取事件源：#txt

2. 确定事件类型：oninput

3. 事件处理

3.1 获取用户输入的数据：input框的value属性

3.2 用户每输入多一个内容（或者少）：应该先清空原来匹配的结果：ul.innerHTML = ‘’;

3.3 安全处理：用户输入的数据，有可能带空格，一般需要帮助用户去除两边的空格：目标字符串.trim()：去除目标两边的空格

3.4 安全处理：如果用户输入的字符串是空的（没有输入）：不需要进行服务器处理（下一步没有必要执行）：结束事件函数；return

3.5 去服务器匹配数据：但是不是去数组中找，而是遍历数组：看数组的元素中是否包含用户输入的关键字

3.5.1 判定：词条中是否包含用户输入的关键字：词条.indexOf(关键字) != -1 ：包含关键字

3.5.2 将关键字放到li中，放到ul#keywords下

3.5.2.1 创建li：document.createElement(‘li’)

3.5.2.2 添加内容：li.innerText = 词条

3.5.2.3 将li放到ul中

完整代码

---