用js简单做一个模糊搜索的效果

使用百度搜索时，每当输入你想查询的关键词，都会出现很多与关键词相近的选项方便你快速查询，今天，就来生成一个自己写的简单的模糊搜索的效果。
首先，最初的写入判断，然后分为两部分，鼠标事件和键盘事件。

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`;
        }
    }
}