bootstrap typeahead实现模糊查询功能

一：下载并引用

二：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);});}

bootstrap typeahead实现模糊查询功能相关推荐

pythonsqlite3模糊_Python编写通讯录通过数据库存储实现模糊查询功能
1.要求数据库存储通讯录,要求按姓名/电话号码查询,查询条件只有一个输入入口,自动识别输入的是姓名还是号码,允许模糊查询. 2.实现功能可通过输入指令进行操作. (1)首先输入"add& ...
ajax jsp模糊查询源码,Ajax动态执行模糊查询功能
Ajax动态执行模糊查询功能内容精选换一换 Profiling采集的数据较多,同时解析后展示的性能指标项也比较多,为方便用户快捷查找到具体性能指标的含义,提供命令行查询功能:不包含metric_n ...
ElasticSearch入门：使用ES来实现模糊查询功能
ElasticSearch入门:使用ES来实现模糊查询功能需求描述方案设计代码设计测试中遇到的问题总结与心得需求描述本文针对在工作中遇到的需求:通过es来实现模糊查询来进行总结:模糊查询 ...
js根据数据关键字实现模糊查询功能
js根据数据关键字实现模糊查询功能模糊查询实现模糊查询功能的步骤和一般方法第一步:创建假数据或请求接口数据第二步:分析数据格式,处理数据第三步:验证功能完整代码模糊查询模糊查询功能是指 ...
TIPTOP 实现T100程序模糊查询功能
使用T100,在menu界面和Ctrl+G功能时,可以只输入部分字符或中文就可以将匹配的程序全部列出来供选择而TOP GP暂时还不支持这个功能,用惯了T100再回来用GP就很不习惯了,于是改善下,直接 ...
ofice2007 没有下拉框模糊查询功能
ofice2007没有下拉框模糊查询功能另外安装一下wps2019,换着用.
html下拉菜单模糊查询,Select下拉框模糊查询功能实现代码
select下拉列表框支持输入模糊查询功能,设计非常的人性化,下面小编给大家分享了关键代码,大家根据自己的需求适当的添加修改,有任何问题欢迎给我反馈. 关键代码如下所示: 可输入的下拉框 var j ...
android地图选点,【百度地图】Android实现地图展示、定位、选点、地点查询和地点模糊查询功能...
1.集成百度地图sdk 请查看百度地图开放平台,这里有很详细的教程. 2.地图展示功能将地图控件放入到当前页面的布局中即可,如下: MapView 在页面代码中,通过id获取到MapView的对象, ...
使用jQuery实现实时模糊查询功能
先说一下模糊查询在方法上写的SQL是跟数据库里边的不一样,这里果断入坑了. 来个MySQL例子: 模糊查询user中的name: select * from user where name like ...

bootstrap typeahead实现模糊查询功能

bootstrap typeahead实现模糊查询功能相关推荐

最新文章

热门文章