使用百度搜索时，每当输入你想查询的关键词，都会出现很多与关键词相近的选项方便你快速查询，今天，就来生成一个自己写的简单的模糊搜索的效果。
首先，最初的写入判断，然后分为两部分，鼠标事件和键盘事件。
var index = 0;
//输入框输入事件
input.oninput = function () {
//使用trim方法去掉写入的value值中的前后空格
var input_value = input.value.trim();
//设置一个空数组,在其中第一项放置一个空字符串,为了避免在键盘光标点击事件中，出现的光标移动下标递增至第二项的问题
var arr = [''],
str = '';
for (var i = 1; i < data.length; i++) {
//使写入的value的值不为空，而且写入的value值在数组中可以找到时
if (data[i].indexOf(input_value) !== -1 && input_value !== '') {
//将该数组中的数据使用push方法写入到新数组中
arr.push(data[i]);
}
}
for (var i in arr) {
str += `<p>${arr[i]}</p>`
//遍历每项，将相关的写入到页面中
}
if (arr.length > 0) {
//当检测到关键词，新数组中有值时，页面内容出现
content.style.cssText = `display:block`
} else {
//否则消失
content.style.cssText = `display:none`
}
content.innerHTML = str;
设置好对写入的值的筛选后，开始设置鼠标事件
var p = document.querySelectorAll('p')
for (var i = 1; i < p.length; i++) {
p[i].ind = i;
//鼠标移动事件
p[i].onmouseover = function () {
for (var j = 0; j < p.length; j++) {
//使用排他思想，将其他项的背景颜色清除
p[j].style.cssText = `background:none`
}
//移动到提示内容中的每一项时，背景颜色发生变化
p[this.ind].style.cssText = `background:blue`
// index = this.ind
}
}
设置键盘事件:
window.onkeydown = function (e) {
e = window.event || e.event;
var p = document.querySelectorAll('p')
if (e.keyCode == 38) {
//当点击向上光标时
index--
if (index < 1) {
index = p.length - 1
//如果下标小于1时（第0项是空字符串）,下标跳转到最后一项
}
for (var j = 0; j < p.length; j++) {
p[j].style.cssText = `background:none`
}
//光标移动到该下标时，设置一个背景颜色变化的事件
p[index].style.cssText = `background:blue`
input.value = p[this.index].innerHTML
} else if (e.keyCode == 40) {
//当点击向下光标时
index++
if (index > p.length - 1) {
index = 1
//如果下标大于最后一项时（第0项是空字符串）,下标跳转到1
}
for (var j = 0; j < p.length; j++) {
p[j].style.cssText = `background:none`
}
p[index].style.cssText = `background:blue`
input.value = p[this.index].innerHTML
}
}
设置一个点击下方搜索框的每项时，直接将该项写入到input框中的事件
for (var i = 1; i < p.length; i++) {
p[i].ind = i;
p[i].onclick = function () {
p[this.ind].style.cssText = `background:blue`;
index = this.ind;
input.value = p[this.ind].innerHTML
//点击时，将点击的一项写入到当前的input框中
}
}
最后设置一个点击其他位置，下方的关键字搜索框消失的事件
window.onclick = function (e) {
e = window.event || e.event;
if (e.target.nodeName !== 'INPUT') {
//设置一个window的点击事件，除了点击到input框中时，下方的搜索结果不消失，随意点击每处位置，下方的搜索结果框都消失.
content.style.cssText = `display:none`;
}
}
完整代码：
data = [
'被门夹过的核桃还能补脑吗',
'被门夹过的脑袋吃核桃还补得回来吗',
'被门夹过的脑袋吃被门夹过的核桃有用吗',
'买了核桃吃了不补脑能找卖核桃的赔钱吗',
'核桃一次性吃太多吃吐了还有用吗',
'爱因斯坦爱吃核桃吗',
'傻人吃了核桃变聪明了还能有傻福吗',
'吃了核桃的人致死率高达100%吗'
]
var input = document.querySelector('input');
var content = document.querySelector('#content');
var index = 0;
//输入框输入事件
input.oninput = function () {
//使用trim方法去掉写入的value值中的前后空格
var input_value = input.value.trim();
//设置一个空数组,在其中第一项放置一个空字符串,为了避免在键盘光标点击事件中，出现的光标移动下标递增至第二项的问题
var arr = [''],
str = '';
for (var i = 1; i < data.length; i++) {
//使写入的value的值不为空，而且写入的value值在数组中可以找到时
if (data[i].indexOf(input_value) !== -1 && input_value !== '') {
//将该数组中的数据使用push方法写入到新数组中
arr.push(data[i]);
}
}
for (var i in arr) {
str += `<p>${arr[i]}</p>`
//遍历每项，将相关的写入到页面中
}
if (arr.length > 0) {
//当检测到关键词，新数组中有值时，页面内容出现
content.style.cssText = `display:block`
} else {
//否则消失
content.style.cssText = `display:none`
}
content.innerHTML = str;
var p = document.querySelectorAll('p')
for (var i = 1; i < p.length; i++) {
p[i].ind = i;
//鼠标移动事件
p[i].onmouseover = function () {
for (var j = 0; j < p.length; j++) {
//使用排他思想，将其他项的背景颜色清除
p[j].style.cssText = `background:none`
}
//移动到提示内容中的每一项时，背景颜色发生变化
p[this.ind].style.cssText = `background:blue`
// index = this.ind
}
}
//键盘事件
window.onkeydown = function (e) {
e = window.event || e.event;
var p = document.querySelectorAll('p')
if (e.keyCode == 38) {
//当点击向上光标时
index--
if (index < 1) {
index = p.length - 1
//如果下标小于1时（第0项是空字符串）,下标跳转到最后一项
}
for (var j = 0; j < p.length; j++) {
p[j].style.cssText = `background:none`
}
//光标移动到该下标时，设置一个背景颜色变化的事件
p[index].style.cssText = `background:blue`
input.value = p[this.index].innerHTML
} else if (e.keyCode == 40) {
//当点击向下光标时
index++
if (index > p.length - 1) {
index = 1
//如果下标大于最后一项时（第0项是空字符串）,下标跳转到1
}
for (var j = 0; j < p.length; j++) {
p[j].style.cssText = `background:none`
}
p[index].style.cssText = `background:blue`
input.value = p[this.index].innerHTML
}
}
for (var i = 1; i < p.length; i++) {
p[i].ind = i;
p[i].onclick = function () {
p[this.ind].style.cssText = `background:blue`;
index = this.ind;
input.value = p[this.ind].innerHTML
//点击时，将点击的一项写入到当前的input框中
}
}
window.onclick = function (e) {
e = window.event || e.event;
if (e.target.nodeName !== 'INPUT') {
//设置一个window的点击事件，除了点击到input框中时，下方的搜索结果不消失，随意点击每处位置，下方的搜索结果框都消失.
content.style.cssText = `display:none`;
}
}
}
网友评论