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 Plupload上传插件的使用
Apr 19 jQuery
jQuery实现动态删除LI的方法
May 30 jQuery
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
基于jQuery的表单填充实例
Aug 22 jQuery
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
如何使用Jquery动态生成二级选项列表
Feb 06 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 面向对象的一个例子
2011/04/12 PHP
php自定义函数call_user_func和call_user_func_array详解
2011/07/14 PHP
PHP无限分类(树形类)的深入分析
2013/06/02 PHP
php实现的Curl封装类Curl.class.php用法实例分析
2015/09/25 PHP
Symfony2函数用法实例分析
2016/03/18 PHP
Smarty模板变量与调节器实例详解
2019/07/20 PHP
php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】
2020/05/27 PHP
基于PHP实现生成随机水印图片
2020/12/09 PHP
juqery 学习之五 文档处理 插入
2011/02/11 Javascript
23个Javascript弹出窗口特效整理
2011/02/25 Javascript
在多个页面使用同一个HTML片段《续》
2011/03/04 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
2013/07/12 Javascript
Bootstrap开发实战之第一次接触Bootstrap
2016/06/02 Javascript
AngularJS动态生成div的ID源码解析
2016/08/29 Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
2017/07/11 jQuery
使用JavaScript中的lodash编写双色球效果
2018/06/24 Javascript
vue this.reload 方法 配置
2018/09/12 Javascript
Vue+Node实现的商城用户管理功能示例
2019/12/23 Javascript
[02:43]DOTA2英雄基础教程 半人马战行者
2014/01/13 DOTA
python列表的增删改查实例代码
2018/01/30 Python
python3实现钉钉消息推送的方法示例
2019/03/14 Python
对Python强大的可变参数传递机制详解
2019/06/13 Python
Python使用sklearn实现的各种回归算法示例
2019/07/04 Python
wxpython布局的实现方法
2019/11/01 Python
使用Keras 实现查看model weights .h5 文件的内容
2020/06/09 Python
关于Python不换行输出和不换行输出end=““不显示的问题(亲测已解决)
2020/10/27 Python
python 用opencv实现图像修复和图像金字塔
2020/11/27 Python
英国标准协会商店:BSI Shop
2019/02/25 全球购物
采购部经理岗位职责
2014/02/10 职场文书
优秀辅导员事迹材料
2014/02/16 职场文书
机电一体化应届生求职信
2014/08/09 职场文书
法制演讲稿
2014/09/10 职场文书
暑假安全教育广播稿
2014/09/10 职场文书
销售经理工作检讨书
2015/02/19 职场文书
2016大学生就业指导课心得体会
2016/01/15 职场文书
web前端之css水平居中代码解析
2021/05/20 HTML / CSS