美文网首页
js实现拼音搜索的下拉选择框

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

作者: 思_路 | 来源:发表于2017-08-15 09:20 被阅读0次

功能实现

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

/**
* 模糊搜索,支持不连续的匹配搜索。
例: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实现拼音搜索的下拉选择框

    功能实现 在系统开发时,经常需要使用根据拼音进行模糊搜索的功能。 引用的项目https://github.com/...

  • Combox

    js实现带搜索功能的下拉框实时搜索实时匹配http://m.jb51.net/article/42813.htm

  • element 问题集锦

    搜索,多选下拉选择框(指定了value-key) 1:搜索,下拉列表中选择值后,再次搜索选择值,小概率出现(前面的...

  • 前端,关于下拉选择

    select标签构成的下拉框和jquery通过js构建的下拉框用法一样。例如: html下拉框: js控制的下拉框...

  • andriod 控件封装 可编辑下拉框

    一:可编辑下拉框android的默认Spinner只能下拉选择内容,而不能选择 二:可编辑下拉框实现方式:1. 将...

  • easyui常用方法

    1、下拉框“商品列表”实现 2、下拉框“客户列表”实现 3、下拉框“系统用户”实现 4、下拉框“物流公司”实现

  • 实现下拉框触发事件

    今天我学习了如何实现下拉框触发事件,发现只要调用change方法就行了,如下是实现选择下拉框填充一个文本框的实现方...

  • 下拉框搜索功能的实现

    下拉框搜索功能的实现。首先我们先做一个下拉框 写入按钮触发事件,loadAjax方法事先已经封装好在pagingJ...

  • C#下拉框选择

    下拉框 选中下拉框 js获取asp标签的ID:$("#<%=ddlTypeYear.ClientID%>") .a...

  • 强势围观!JS仿智能搜索究竟有多牛逼?

    JS实现仿google、百度搜索框输入信息智能提示的实现方法 搜索框智能提示是一种全新的搜索方式,可以在进行关键词...

网友评论

      本文标题:js实现拼音搜索的下拉选择框

      本文链接:https://www.haomeiwen.com/subject/vxlmrxtx.html