异步搜索jquery select插件的使用方法-tutorial js-php.cn

Rumah

hujung hadapan web

tutorial js

异步搜索jquery select插件的使用方法

Oct 20, 2017 am 11:17 AM

jquery select pemalam

异步实时搜索jquery select插件

一、先看看效果。

二、做此插件的原因。

　　1.数据量过大（几千、几万条），无法一次性全部加载。

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

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

三、如何使用。

　　1.html和js

1 &lt;select id=&quot;unit&quot;&gt;&lt;/select&gt;
2 &lt;script type=&quot;text/javascript&quot; src=&quot;/demo/thirdparty/jquery/jquery-1.8.3.min.js&quot;&gt;&lt;/script&gt;
3 &lt;script src=&quot;/demo/thirdparty/pheker/ajaxselect.js&quot;&gt;&lt;/script&gt;

Salin selepas log masuk

　　2.实例。

# 使用实例
        var initUrl = &quot;/demo/defineDict.do?method=getEnterpriseDict&amp;unitName=&quot;+encodeURIComponent(encodeURIComponent(&quot;xx无烟煤矿业集团有限责任公司&quot;));
        var ajaxUrl = &quot;/demo/defineDict.do?method=getEnterpriseDict&amp;unitName=&quot;;
        var $select = $(&quot;#ajaxselect&quot;).ajaxselect({
            initUrl:initUrl,
            ajaxUrl:ajaxUrl,
            defkv:[&#39;id&#39;,&#39;text&#39;],
            selected:0,
        },function(filterData,isInit){
            //filter
            console.log(filterData);
        },function(cbData,isInit){
            //callback
            console.log(cbData);
        });
        $select.on(&quot;change&quot;, function(){
            console.log(this.value);
        });

Salin selepas log masuk

　　3.详细配置。

var defcfg = {
    initUrl:&#39;&#39;,            //初始化请求地址
    ajaxUrl:&#39;&#39;,            //异步请求地址
    defkv:[],            //返回数据 的key
    delay:200,            //ajax回调 延时
    width:200,            //input 宽度
    height:30,            //input 高度
    selected:-1,        //初始化数据 默认选中项,-1为不选中
    limit:20,            //最大显示条数,0为不限制
    maxheight:250,        //最大显示高度
    hoverbg:&#39;#189FD9&#39;,    //悬浮背景色
    activebg:&#39;#5FB878&#39;,    //选中项背景色
    style:&#39;&#39;            //自定义样式
};

Salin selepas log masuk

　　　　还有一些其它的api，详细请看参考链接、源码。

四：声明：

本插件是根据现有插件，根据自己的需求修改而来。如有小问题请自行修改源码即可。
如果不是异步搜索，其它插件譬如layui、select2也是不错的选择。
另外此插件依赖jquery

Atas ialah kandungan terperinci 异步搜索jquery select插件的使用方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn