jquery select插件异步实时搜索实例代码


Posted in jQuery onOctober 20, 2017

一、先看看效果。

jquery select插件异步实时搜索实例代码

二、做此插件的原因。

1.数据量过大(几千、几万条),无法一次性全部加载。

2.现有插件各不相同,无法满足功能需求。

3.美观性,可控性不足。

三、如何使用。

1.html和js

<select id="unit"></select>
 <script type="text/javascript" src="/demo/thirdparty/jquery/jquery-1.8.3.min.js"></script>
 <script src="/demo/thirdparty/pheker/ajaxselect.js"></script>

2.实例。

# 使用实例
    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.详细配置。

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插件异步实时搜索,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
jQuery返回定位插件详解
May 15 jQuery
jQuery日期范围选择器附源码下载
May 23 jQuery
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
基于jquery实现多级菜单效果
Jul 25 jQuery
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
jQuery中DOM常见操作实例小结
Aug 01 jQuery
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 jQuery
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 jQuery
利用jQuery实现简单的拖曳效果实例代码
Oct 20 #jQuery
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 #jQuery
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 #jQuery
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 #jQuery
jquery实现图片跟随鼠标的实例
Oct 17 #jQuery
jquery一键控制checkbox全选、反选或全不选
Oct 16 #jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 #jQuery
You might like
php checkbox复选框值的获取与checkbox默认值输出方法
2010/05/15 PHP
PHP中函数gzuncompress无法使用的解决方法
2017/03/02 PHP
ExtJS下grid的一些属性说明
2009/12/13 Javascript
jquery控制左右箭头滚动图片列表的实例
2013/05/20 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
2014/01/09 Javascript
javascript从作用域链谈闭包
2020/07/29 Javascript
js实现的万能flv网页播放器代码
2016/04/30 Javascript
JS实现点击事件统计的简单实例
2016/07/10 Javascript
简单实现IONIC购物车功能
2017/01/10 Javascript
微信小程序 实现点击添加移除class
2017/06/12 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
2018/03/05 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
2018/08/12 Javascript
django使用channels2.x实现实时通讯
2018/11/28 Javascript
js之切换全屏和退出全屏实现代码实例
2019/09/09 Javascript
JavaScript复制变量三种方法实例详解
2020/01/09 Javascript
javascript贪吃蛇游戏设计与实现
2020/09/17 Javascript
python dict remove数组删除(del,pop)
2013/03/24 Python
windows下python模拟鼠标点击和键盘输示例
2014/02/28 Python
Python中二维列表如何获取子区域元素的组成
2017/01/19 Python
python字典操作实例详解
2017/11/16 Python
Python爬虫实例_利用百度地图API批量获取城市所有的POI点
2018/01/10 Python
PyQt5每天必学之事件与信号
2018/04/20 Python
python切片及sys.argv[]用法详解
2018/05/25 Python
Django上线部署之IIS的配置方法
2019/08/22 Python
Python 3.6 中使用pdfminer解析pdf文件的实现
2019/09/25 Python
基于Python fminunc 的替代方法
2020/02/29 Python
Zooplus葡萄牙:欧洲领先的网上宠物商店
2018/07/01 全球购物
日本小田急百货官网:Odakyu
2018/07/19 全球购物
公共汽车、火车和飞机票的通用在线预订和销售平台:INFOBUS
2019/11/30 全球购物
Michael Kors澳大利亚官网:世界知名的奢侈饰品和成衣设计师
2020/02/13 全球购物
金融专业应届生求职信
2013/11/02 职场文书
幼儿园小班教师寄语
2014/04/03 职场文书
药剂专业自荐书
2014/06/20 职场文书
兵马俑的导游词
2015/02/02 职场文书
Python自然语言处理之切分算法详解
2021/04/25 Python
「租借女友」第2季樱泽墨角色PV&新视觉图公开
2022/03/21 日漫