We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
1、我们需要实时对输入框中内容进行查询，一旦输入内容不同，提示框中的内容也立刻改变
所以使用DOM中的oninput事件，oninput事件在用户输入时触发。该事件在<input>或<textarea>元素的值发生改变时触发。
oninput
<input>
<textarea>
提示： 该事件类似于onchange事件。不同之处在于oninput事件在元素值发生变化是立即触发，onchange在元素失去焦点时触发。
onchange
2、焦点在input搜索框中时有下拉列表ul，否则没有，所以我使用onfocus和onblur
input
ul
onfocus
onblur
onblur事件会在对象失去焦点时发生。onblur经常用于Javascript验证代码，一般用于表单输入框。
onfocus事件在对象获得焦点时发生。onfocus通常用于<input>，<select>和<a>.
<select>
<a>
3、对数据进行匹配时使用模糊查询
// 模糊查询 function search(){ let tmp = []; if(!inputContent.value) return tmp; for(let i = 0; i < arr.length; i++){ if(arr[i].indexOf(inputContent.value) >= 0){ tmp.push(arr[i]); } } return tmp; }
index.html代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> * { margin: 0; padding: 0; } .searchedUl ul{ border: 1px solid black; width: 300px; list-style: none; } </style> <body> <div class="container"> <input type="text" class="inputContent" /> <button class="btn">搜索</button> <div class="searchedUl"></div> </div> </body> <script src="index.js"></script> </html>
index.js代码
var arr = ["中国","日本","美国","俄罗斯","加拿大","英国","澳大利亚","西班牙","德国","孟买加","阿拉伯","印度","印度尼西亚"]; var inputContent = document.getElementsByClassName("inputContent")[0]; var searchedUl = document.getElementsByClassName("searchedUl")[0]; // 模糊查询 function search(){ let tmp = []; if(!inputContent.value) return tmp; for(let i = 0; i < arr.length; i++){ if(arr[i].indexOf(inputContent.value) >= 0){ tmp.push(arr[i]); } } return tmp; } // 创建ul标签 function createUl(){ let ul = document.createElement('ul'); ul.id = "list" // 没有匹配的li时隐藏ul if(document.getElementsByTagName('li').length == 0){ ul.style.visibility = 'hidden'; } searchedUl.appendChild(ul); } // 删除ul标签 function removeUl(){ let ul = document.getElementById('list'); if(ul){ searchedUl.removeChild(ul); } } // 输入框获取焦点时 inputContent.onfocus = function() { let ul = document.getElementById('list'); if(ul && document.getElementsByTagName('li').length > 0){ ul.style.visibility = 'visible'; } } // ul标签添加li内容 function showList() { let ul = document.getElementById('list'); let arr = search(); for(let i = 0; i < arr.length; i++){ let li = document.createElement("li"); li.innerHTML = arr[i]; document.getElementById("list").appendChild(li); } // 有匹配的li时显示ul if(document.getElementsByTagName('li').length > 0){ ul.style.visibility = 'visible'; } } // 输入框失去焦点时 inputContent.onblur = function(){ let ul = document.getElementById('list'); ul.style.visibility = 'hidden'; } // 当输入框内容改变时 inputContent.oninput = function() { // 删除ul removeUl(); // 重新添加ul createUl(); // ul标签添加li内容 showList(); }
搜索防抖
服务端限定处理的关键词长度 ，只去前面 n 个。因为太长的关键字会使搜索效率低下
常搜索的关键词做缓存
默认 focus，减少用户一次点击
对违法词汇搜索的结果信息过滤
根据用户特征与地理位置返回特定的结果（Google 就是这么做的）
The text was updated successfully, but these errors were encountered:
No branches or pull requests
要实现的功能
所以使用DOM中的
oninput事件，oninput事件在用户输入时触发。该事件在<input>或<textarea>元素的值发生改变时触发。提示： 该事件类似于
onchange事件。不同之处在于oninput事件在元素值发生变化是立即触发，onchange在元素失去焦点时触发。onblur事件会在对象失去焦点时发生。onblur经常用于Javascript验证代码，一般用于表单输入框。onfocus事件在对象获得焦点时发生。onfocus通常用于<input>，<select>和<a>.具体代码实现
index.html代码
index.js代码
实现效果
优化方案
搜索防抖
服务端限定处理的关键词长度 ，只去前面 n 个。因为太长的关键字会使搜索效率低下
常搜索的关键词做缓存
默认 focus，减少用户一次点击
对违法词汇搜索的结果信息过滤
根据用户特征与地理位置返回特定的结果（Google 就是这么做的）
The text was updated successfully, but these errors were encountered: