Open
Description
要实现的功能
1、我们需要实时对输入框中内容进行查询，一旦输入内容不同，提示框中的内容也立刻改变
所以使用DOM中的oninput事件，oninput事件在用户输入时触发。该事件在<input>或<textarea>元素的值发生改变时触发。
提示： 该事件类似于onchange事件。不同之处在于oninput事件在元素值发生变化是立即触发，onchange在元素失去焦点时触发。
2、焦点在
input搜索框中时有下拉列表ul，否则没有，所以我使用onfocus和onblur
onblur事件会在对象失去焦点时发生。onblur经常用于Javascript验证代码，一般用于表单输入框。
onfocus事件在对象获得焦点时发生。onfocus通常用于<input>，<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 就是这么做的）