当前位置 : 主页 > 网络编程 > JavaScript >

基于bootstrap的autocomplete自动完成插件

来源:互联网 收集:自由互联 发布时间:2021-07-03
基于bootstrap插件实现autocomplete自动完成表单,提供脚本代码,用例,以及后台服务端(php).原文有些没说清楚的地方,希望能帮助大家. 首先肯定还是加载bootstrapjquery了. 需要额外说明的是,后端
基于bootstrap插件实现autocomplete自动完成表单,提供脚本代码,用例,以及后台服务端(php). 原文有些没说清楚的地方,希望能帮助大家.
首先肯定还是加载bootstrap&jquery了.
需要额外说明的是,后端返回的二维数组,和formatItem方法下面的调用保持一致即可;
另外,返回的数据要先parseJSON!切记.


相关参数说明:
source:function(query,process){}。query表示当前文本输入框中的字符串,可在该方法中通过ajax向后台请求数据(数组形式的json对象),然后将返回的对象作为process的参数;
formatItem:function(item){}。对返回数据的具体某个json对象转化为字符串格式,用以显示在提示列表中,返回值:字符串;
setValue:function(item){}。选中提示列表某项时,设置文本输入框中显示的值以及实际需要获取的值。返回值格式:{'data-value':item["输入框显示值的item属性"],'real-value':item["实际需要获取值的item属性"]},后期可通过文本输入框的real-value属性获取该值;
items:自动完成提示的最大结果集数量,默认:8;
minLength:当前文本输入框中字符串达到该属性值时才进行匹配处理,默认:1;
delay:指定延时毫秒数后,才正真向后台请求数据,以防止输入过快导致频繁向后台请求,默认:500
具体请参考 http://www.oschina.net/code/snippet_219811_19025

1. [代码][JavaScript]代码    

    <script>
    $('#sim_iccid').autocomplete({
        source:function(query,process){
            var matchCount = this.options.items;//允许返回结果集最大数量
            $.get("http://www.soyiyuan.com/update/",{"iccid":query,"matchCount":matchCount},function(respData){
                respData = $.parseJSON(respData);//解析返回的数据
                return process(respData);
            });
        },
        formatItem:function(item){
            return item["iccid"]+"("+item["mobile"]+")";
        },
        setValue:function(item){
            return {'data-value':item["iccid"],'real-value':item["mobile"]};
        }
    });
    </script>

2. [代码]$data为一个二维数组    

echo json_encode( $data )

3. [代码]需要返回的标准json格式    

[{"iccid":"12345678901234567890","mobile":"1850000"},{"iccid":"12345785","mobile":"1850001"}]
网友评论