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实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
jQuery查找dom的几种方法效率详解
May 17 jQuery
jquery仿京东商品放大浏览页面
Jun 06 jQuery
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
详解JQuery基础动画操作
Apr 12 jQuery
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
jQuery实现获取多选框的值示例
Feb 07 jQuery
jQuery实现查看图片功能
Dec 01 jQuery
jquery实现点击左右按钮切换图片
Jan 27 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常用函数小技巧
2008/09/11 PHP
php 模拟POST提交的2种方法详解
2013/06/17 PHP
如何使用php判断所处服务器操作系统的类型
2013/06/20 PHP
php实现memcache缓存示例讲解
2013/12/04 PHP
PHP编写简单的App接口
2016/08/28 PHP
laravel config文件配置全局变量的例子
2019/10/13 PHP
php实现微信和支付宝支付的示例代码
2020/08/11 PHP
Javascript Object.extend
2010/05/18 Javascript
Prototype源码浅析 String部分(二)
2012/01/16 Javascript
用JavaScript实现使用鼠标画线的示例代码
2014/08/19 Javascript
js实现鼠标经过表格行变色的方法
2015/05/12 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
2015/08/03 Javascript
JavaScript中变量、指针和引用功能与操作示例
2018/08/04 Javascript
ES6 Promise对象的应用实例分析
2019/06/27 Javascript
vue封装可复用组件confirm,并绑定在vue原型上的示例
2019/10/31 Javascript
Python实现给qq邮箱发送邮件的方法
2015/05/28 Python
Python使用pyh生成HTML文档的方法示例
2018/03/10 Python
使用python实现简单五子棋游戏
2019/06/18 Python
解决Django Static内容不能加载显示的问题
2019/07/28 Python
pytorch1.0中torch.nn.Conv2d用法详解
2020/01/10 Python
python图形开发GUI库pyqt5的详细使用方法及各控件的属性与方法
2020/02/14 Python
python能开发游戏吗
2020/06/11 Python
瑜伽灵感珠宝:Satya Jewelry
2018/01/06 全球购物
一些Solaris面试题
2015/12/22 面试题
《长江之歌》教学反思
2014/04/17 职场文书
心理咨询承诺书
2014/05/20 职场文书
培训科主任岗位职责
2014/08/08 职场文书
卫生厅领导班子党的群众路线教育实践活动整改措施
2014/09/20 职场文书
个人四风问题对照检查材料
2014/09/26 职场文书
高中政治教学反思
2016/02/23 职场文书
如何用python绘制雷达图
2021/04/24 Python
Python数据可视化之用Matplotlib绘制常用图形
2021/06/03 Python
Python 中 Shutil 模块详情
2021/11/11 Python
Mysql中有关Datetime和Timestamp的使用总结
2021/12/06 MySQL
十大最强格斗系宝可梦,超梦X仅排第十,第二最重格斗礼仪
2022/03/18 日漫
MySQL数据库之内置函数和自定义函数 function
2022/06/16 MySQL