标签：onkeyup oat turn doctype ber ttext attr result return
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Title</title> | |
| <style> | |
| fieldset, img, input, button { | |
| border: none; | |
| padding: 0; | |
| margin: 0; | |
| outline-style: none; | |
| } | |
| ul, ol { | |
| list-style: none; | |
| margin: 0px; | |
| padding: 0px; | |
| } | |
| #box { | |
| width: 405px; | |
| margin: 200px auto; | |
| position: relative; | |
| } | |
| #txtSearch { | |
| float: left; | |
| width: 300px; | |
| height: 32px; | |
| padding-left: 4px; | |
| border: 1px solid #b6b6b6; | |
| border-right: 0; | |
| } | |
| #btnSearch { | |
| float: left; | |
| width: 100px; | |
| height: 34px; | |
| font: 400 14px/34px "microsoft yahei"; | |
| color: white; | |
| background: #3385ff; | |
| cursor: pointer; | |
| } | |
| #btnSearch:hover { | |
| background: #317ef3; | |
| } | |
| #pop { | |
| width: 303px; | |
| border: 1px solid #ccc; | |
| padding: 0px; | |
| position: absolute; | |
| top: 34px; | |
| } | |
| #pop ul li { | |
| padding-left: 5px; | |
| } | |
| #pop ul li:hover { | |
| background-color: #CCC; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="box"> | |
| <input type="text" id="txtSearch"> | |
| <input type="button" value="百度一下" id="btnSearch"> | |
| </div> | |
| <script> | |
| //模拟词库 | |
| var datas = ["a", "abc", "abbbb", "abxxxx", "xyz", "abcdef", "abzzzz"]; | |
| //步骤分析： | |
| //1 当键盘按键抬起时触发效果(keyup) | |
| //2 先根据当前输入内容，获取到可以显示的词 | |
| //2.1 能满足条件的词必须以当前输入的内容为开头（ 词库词.indexOf(输入内容) ） | |
| //3 创建结构即可 | |
| //3.1 提前设置好的样式对结构的创建也有要求 ( div，id设置为pop，内部结构为ul和li ) | |
| //4 细节处理 | |
| //实现： | |
| //1 获取元素 | |
| var box = document.getElementById("box"); | |
| var txt = document.getElementById("txtSearch"); | |
| //2 给txt设置keyup事件 | |
| txt.onkeyup = function () { | |
| //3 根据当前输入内容，到词库中匹配到满足条件的词 | |
| var resultArr = [];//用于保存取出的词 | |
| for (var i = 0; i < datas.length; i++) { | |
| if (datas[i].indexOf(this.value) == 0) { | |
| //将词取出 | |
| resultArr.push(datas[i]); | |
| } | |
| } | |
| //-------------- | |
| //对可能已经存在的pop结构进行删除 | |
| //如果页面中已经存在了旧的列表，这个标签一定具有id，叫pop | |
| var pop = document.getElementById("pop"); | |
| //检测pop的值，如果为null，不需要删除，如果不是null，删除即可 | |
| if (pop) { | |
| box.removeChild(pop); | |
| } | |
| //--------------- | |
| //如果当前没有输入内容，不进行新的结构创建 | |
| if (txt.value == "") { | |
| return; | |
| } | |
| //如果没有匹配到词，不需要进行后续的结构创建 | |
| if (resultArr.length == 0) { | |
| return; | |
| } | |
| //--------------- | |
| //4 根据取出的词创建结构(需要考虑样式问题) | |
| var div = document.createElement("div"); | |
| div.id = "pop"; | |
| box.appendChild(div); | |
| var list = document.createElement("ul"); | |
| div.appendChild(list); | |
| //遍历取出的词，进行li的创建 | |
| var li; | |
| for (var i = 0; i < resultArr.length; i++) { | |
| li = document.createElement("li"); | |
| setText(li, resultArr[i]); | |
| list.appendChild(li); | |
| } | |
| }; | |
| function setText(element, xinText) { | |
| if (typeof element.innerText == "string") { | |
| //说明支持innerText属性 | |
| element.innerText = xinText; | |
| } else { | |
| //说明支持textContent | |
| element.textContent = xinText; | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
标签：onkeyup oat turn doctype ber ttext attr result return
原文地址：https://www.cnblogs.com/tianjinlll/p/11397324.html
