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+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
jQuery实现广告条滚动效果
Aug 22 jQuery
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
jquery在启动页面时,自动加载数据的实例
Jan 22 jQuery
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
jquery实现动态创建form并提交的方法示例
May 27 jQuery
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 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
人族 Terran 魔法与科技
2020/03/14 星际争霸
phpmailer发送邮件之后,返回收件人是否阅读了邮件的方法
2014/07/19 PHP
功能强大的PHP发邮件类
2016/08/29 PHP
php上传excel表格并获取数据
2017/04/27 PHP
PHP 范围解析操作符(::)用法分析【访问静态成员和类常量】
2020/04/14 PHP
一个基于jQuery的树型插件(OrangeTree)使用介绍
2012/05/03 Javascript
JavaScript中的对象的extensible属性介绍
2014/12/30 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
2020/05/16 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
2016/08/27 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
2016/11/09 Javascript
利用vue写todolist单页应用
2016/12/15 Javascript
jQuery树控件zTree使用方法详解(一)
2017/02/28 Javascript
Bootstrap 网格系统布局详解
2017/03/19 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
2017/05/11 Javascript
微信小程序图片宽100%显示并且不变形
2017/06/21 Javascript
Vue-cli项目获取本地json文件数据的实例
2018/03/07 Javascript
webpack 3.X学习之多页面打包的方法
2018/09/04 Javascript
微信小程序http连接访问解决方案的示例
2018/11/05 Javascript
jsonp跨域获取百度联想词的方法分析
2019/05/13 Javascript
python编程开发之类型转换convert实例分析
2015/11/13 Python
老生常谈Python startswith()函数与endswith函数
2017/09/08 Python
对Python 文件夹遍历和文件查找的实例讲解
2018/04/26 Python
数组保存为txt, npy, csv 文件, 数组遍历enumerate的方法
2018/07/09 Python
python实现的MySQL增删改查操作实例小结
2018/12/19 Python
原生python实现knn分类算法
2019/10/24 Python
浅谈keras中的目标函数和优化函数MSE用法
2020/06/10 Python
django美化后台django-suit的安装配置操作
2020/07/12 Python
解析python 类方法、对象方法、静态方法
2020/08/15 Python
大女孩胸罩:Big Girls Bras
2016/12/15 全球购物
阿联酋优惠券服务:Living Kool
2019/12/12 全球购物
DOUGLAS波兰:在线销售香水和化妆品
2020/07/05 全球购物
《山谷中的谜底》教学反思
2014/04/26 职场文书
2014年前台文员工作总结
2014/12/08 职场文书
小时代观后感
2015/06/10 职场文书
Nginx 配置 HTTPS的详细过程
2022/05/30 Servers
OpenFeign实现远程调用
2022/08/14 Java/Android