bootstrap typeahead实现模糊查询功能

今天药忘吃喽~ 2022-06-04 07:22 325阅读 0赞

一：下载并引用

二：html部分：

三：js部分：

function displayResult(item, val, text) \{  
    console.log(item);  
    $('.alert').show().html('You selected <strong>' + val + '</strong>: <strong>' + text + '</strong>');  
\}

//上面这个是获取被选中的值并赋给class为.alert的元素来显示

$('\#demo1').typeahead(\{  
        source: \[  
    \{ id: 1, name: '你好' \},  
    \{ id: 2, name: '你好2' \},  
    \{ id: 3, name: '中国' \},  
    \{ id: 4, name: 'Buffalo' \},  
    \{ id: 5, name: 'Boston' \},  
    \{ id: 6, name: 'Columbus' \},  
    \{ id: 7, name: 'Dallas' \},  
    \{ id: 8, name: 'Vancouver' \},  
    \{ id: 9, name: 'Seattle' \},  
    \{ id: 10, name: 'Los Angeles' \}  
    \],

items: 5,                          //规定查询时要显示的条目的最大值。数据类型是 number，默认值是 8

display: 'Name',                //可以不写默认就是name  
        val: 'ID',                             //可以不写默认就是name  
        itemSelected: displayResult            //此处的意思是调用displayResult这个方法  
    \});

//上面的方法是前端直接写死option内容，还有一种就是通过ajax异步加载的方式

$('\#demo1').typeahead(\{  
        ajax: \{ url: '/cities/list', triggerLength: 1 \},

//省略ajax具体步骤  
        itemSelected: displayResult  
    \});

上面的方式就是通过异步加载

备注：triggerLength用来规顶输入多少个字符就能开始模糊查询，默认为3可以自己定义

source: function (query, process) {
            var parameter = {query: query};
            $.post('@Url.Action("AjaxService")', parameter, function (data) {
                process(data);
            });
        }