最新项目中用到搜索的比较多,也就是下拉表单,从中选择一项,我们平时较多的使用select,或者使用combobox
这里我想使用的是tokenInput,为什么呢?因为页面信息较多,并且select数量级较大 超过1000条,并且多出地方使用,这个时候使用常规的select, combobox,会发现,
loading时间非常长。这里不是说,后台取数据慢,是表现在前台渲染花费了很多时间。
所以这里我是用了tokenInput,可以完美解决这个问题,
什么是tokenInput,白话就是一个搜索插件。将搜索到的解决,以标签形式展现在搜索框,并且可以配置多个搜索结果,不能重复搜索,预加载等等。
具体可以查看官网介绍
http://loopj.com/jquery-tokeninput/
讲解非常全面,并且附带demo,给赞一个
这里常规的一些配置,只是的简单说一下:
1,queryParam 这个是获取搜索框内容,默认:q ,也就是 你在后台可以从q 参数中获取。当然可以配置成其他参数
2.searchDelay 延迟搜索 配置多少毫秒
3.propertyToSearch 配置显示哪个属性, 也就是id 还是name 或者其他
4.minChars 最少输入几个字符,才会搜索
其他具体的还是请看官网的介绍,很详细。
这了我只介绍官网没有介绍的一个属性,也是我们会使用到的
onSend: 字面就是当发送搜索结果的时候触发
$("#temp").tokenInput("/data/searchDataFromDataBase.json", {
prePopulate:[
{id: id_index, name: prePopulateName}
],
preventDuplicates: true,
theme: "facebook",
onSend: function(param1) {
var filterValueJson = {};
var index = 0;
......
})
而其他Onadd OnResult OnDelete OnReady 监听 请查看官网
Email:oldlock1988@163.com
QQ:346600357