基于bootstrap插件实现autocomplete自动完成表单

 更新时间:2016年05月07日 15:26:23   作者:化蝶自在飞  
这篇文章主要介绍了基于bootstrap插件实现autocomplete自动完成表单的相关资料,感兴趣的朋友可以参考一下

基于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

基于bootstrap插件实现autocomplete自动完成表单,代码如下

1.代码

<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格式    

[code][{"iccid":"12345678901234567890","mobile":"1850000"},{"iccid":"12345785","mobile":"1850001"}][code]

Bootstrap自动完成控件Autocomplete是基于bootstrap自带控件typeahead改造而来,因为 typeahead不支持复杂的对象。

//示例代码如下:
 
$('#autocompleteInput').autocomplete({
 source:function(query,process){
  var matchCount = this.options.items;//返回结果集最大数量
  $.post("/bootstrap/region",{"matchInfo":query,"matchCount":matchCount},function(respData){
  return process(respData);
  });
 },
 formatItem:function(item){
  return item["regionName"]+"("+item["regionNameEn"]+","+item["regionShortnameEn"]+") - "+item["regionCode"];
 },
 setValue:function(item){
  return {'data-value':item["regionName"],'real-value':item["regionCode"]};
 }
 });
 
$("#goBtn").click(function(){ //获取文本框的实际值
 var regionCode = $("#autocompleteInput").attr("real-value") || "";
 alert(regionCode);
 });

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

以上就是本文的全部内容,希望对大家的学习有所帮助。

相关文章

  • javascript 精粹笔记

    javascript 精粹笔记

    javascript 精粹笔记,都是一些js下应用技巧之类,学习js的朋友可以简单的参考浏览下。
    2010-05-05
  • JavaScript面向对象精要(下部)

    JavaScript面向对象精要(下部)

    这篇文章主要介绍了JavaScript面向对象精要(下部),需要的朋友可以参考下
    2017-09-09
  • bootstrap网格系统使用方法解析

    bootstrap网格系统使用方法解析

    这篇文章主要为大家详细解析了bootstrap网络系统使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • 2019 年编写现代 JavaScript 代码的5个小技巧(小结)

    2019 年编写现代 JavaScript 代码的5个小技巧(小结)

    这篇文章主要介绍了2019 年编写现代 JavaScript 代码的5个小技巧,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-01-01
  • js+css实现换肤效果

    js+css实现换肤效果

    这篇文章主要为大家详细介绍了js+css实现换肤效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • JS+CSS3实现的简易钟表效果示例

    JS+CSS3实现的简易钟表效果示例

    这篇文章主要介绍了JS+CSS3实现的简易钟表效果,涉及JavaScript结合定时器的页面元素动态设置与数值计算相关操作技巧,需要的朋友可以参考下
    2019-04-04
  • 微信小程序实现下滑到底部自动翻页功能

    微信小程序实现下滑到底部自动翻页功能

    这篇文章主要为大家详细介绍了微信小程序实现下滑到底部自动翻页功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • 小程序scroll-view组件实现滚动的示例代码

    小程序scroll-view组件实现滚动的示例代码

    这篇文章主要介绍了小程序scroll-view组件实现滚动的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 解决bootstrap中下拉菜单点击后不关闭的问题

    解决bootstrap中下拉菜单点击后不关闭的问题

    今天小编就为大家分享一篇解决bootstrap中下拉菜单点击后不关闭的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • 微信小程序onShareTimeline()实现分享朋友圈

    微信小程序onShareTimeline()实现分享朋友圈

    这篇文章主要给大家介绍了关于微信小程序onShareTimeline()实现分享朋友圈的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01

最新评论