js实现拼音搜索的下拉选择框

功能实现

在系统开发时,经常需要使用根据拼音进行模糊搜索的功能。

  • 引用的项目
    https://github.com/devbridge/jQuery-Autocomplete
/**
* 模糊搜索,支持不连续的匹配搜索。
例:yangk-->yangkang
        yk-->yangkang

*/
function filter(item, key) {
    var b = [];
    var j = 0;
    for (var i = 0; i < item.length; i++) {
        if (j < key.length && item[i] == key[j]) {
            j++;
            b.push(i);
        }
    }
    return j == key.length;
}

var countries = [{
        value: '周军',
        name: 'zhoujun',
        data: '23'
    },
    {
        value: '杨康',
        name: 'yangkang',
        data: '22'
    },
    {
        value: '张晓飞',
        name: 'zhangxiaofei',
        data: '24',
    }
];  

function loadSelect(data){
    $('#autocomplete').autocomplete({
        lookup: data,
        lookupFilter: function(suggestion, query, queryLowerCase) {
            return filter(suggestion.name + suggestion.value, query.toLowerCase());
        },
        onSelect: function(suggestion) {
            //alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
            console.log(suggestion);
        }
    });
}
loadSelect(countries)

你可能感兴趣的:(js实现拼音搜索的下拉选择框)