一、先看看效果。
二、做此插件的原因。
1.数据量过大(几千、几万条),无法一次性全部加载。
3.美观性,可控性不足。
三、如何使用。
1.html和js
rush:js;">
2.实例。
rush:js;">
# 使用实例
var initUrl = "/demo/defineDict.do?method=getEnterpriseDict&unitName="+encodeURIComponent(encodeURIComponent("xx无烟煤矿业集团有限责任公司"));
var ajaxUrl = "/demo/defineDict.do?method=getEnterpriseDict&unitName=";
var $select = $("#ajaxselect").ajaxselect({
initUrl:initUrl,ajaxUrl:ajaxUrl,defkv:['id','text'],selected:0,},function(filterData,isInit){
//filter
console.log(filterData);
},function(cbData,isInit){
//callback
console.log(cbData);
});
$select.on("change",function(){
console.log(this.value);
});
3.详细配置。
rush:js;">
var defcfg = {
initUrl:'',//初始化请求地址
ajaxUrl:'',//异步请求地址
defkv:[],//返回数据 的key
delay:200,//ajax回调 延时
width:200,//input 宽度
height:30,//input 高度
selected:-1,//初始化数据 默认选中项,-1为不选中
limit:20,//最大显示条数,0为不限制
maxheight:250,//最大显示高度
hoverbg:'#189FD9',//悬浮背景色
activebg:'#5FB878',//选中项背景色
style:'' //自定义样式
};
还有一些其它的api,详细请看参考链接、源码。
四:声明:
本插件是根据现有插件,根据自己的需求修改而来。如有小问题请自行修改源码即可。
如果不是异步搜索,其它插件譬如layui、select2也是不错的选择。
另外此插件依赖jquery。
总结
以上所述是小编给大家介绍的jquery select插件异步实时搜索。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。
原文地址:https://www.jb51.cc/jquery/35684.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。