jquery 搜索自动匹配关键字

在项目中，可能会碰到搜索功能自动匹配关键字功能，开始也不会，后经过某位大神提供代码实现了搜索自动匹配功能；
实例使用的是模拟服务器发送json数据方式来实现功能；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var json = [
    {
        "name": "搜索a",
        "pinyin": "aaa"
    },
    {
        "name": "搜索b",
        "pinyin": "bcd"
    },
    {
        "name": "数据",
        "pinyin": "abc"
    }
       // 。。。。。。。。
];

js代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
$('#input').on('keyup', function () {
    var arr3=[];//匹配出来的所有对象
    var search_str = $(this).val();
    if(search_str !=""){ //判断当前搜索框非空
        $(".search .s").css("display","block");//搜索框非空时，显示下拉搜索框
        
        var search_result = findInJsonPin(search_str, json);
        var $show_area = $('#show-area');
        $show_area.empty();
        search_result.forEach(function (val) {
            $show_area.append('<li>' + val + '</li>');//添加匹配出来的对象
            arr3.push(val);//将所有匹配的对象存放到数组
        });
        //点击匹配的对象添加到输入框，并隐藏下拉搜索框
        $("#show-area").on("click","li",function(){
            $('#input').val(arr3[$(this).index()]);
            $(".search .s").css("display","none");
        });
    }else{
        $(".search .s").css("display","none");
    }
});

function findInJson(search_str, json) {
    var result = [];
    json.forEach(function (val) {
        var regex = new RegExp(search_str, 'i');
        if (regex.test(val.name)) {
            result.push(val.name);
        } else if (regex.test(val.pinyin)) {
            result.push(val.pinyin);
        }
    });
    return result;
}

html代码部分：

1
2
<input id="input" class="txt" type="text" >
<ul class="s" id="show-area"></ul>