bigautocomplete实现联想输入,自动补全
2015-07-08 21:15
531 查看
bigautocomplete是一款Jquery插件。用它实现仿搜索引擎文本框自动补全插件功能很实用,使用也很简单,引入了插件之后写几行代码就可以实现,可以灵活设置。
先看效果图:
上图是通过ajax请求服务器返回的数据。下面简单介绍如何使用。
html代码:
javascript代码:
js中data里的result可以不写。
2、ajax请求:
html代码:
javascript代码:
服务端返回数据格式:
服务端的代码:(以ThinkPHP示例)
默认是POST过来的数据,名称是keyword,返回数据是和本地data一致的。
先看效果图:
上图是通过ajax请求服务器返回的数据。下面简单介绍如何使用。
一、如何使用:
引入jquery.bigautocomplete.js和jquery.bigautocomplete.css文件到你的页面中。二、参数说明:
$("xxxxx").bigAutocomplete({data:[...],url:"",width:0,callback:{}})参数 | 说明 |
data(可选): | data:格式{data:[{title:null,result:{}},{title:null,result:{}}]} url和data两个参数必须有一个,且只有一个生效,data优先。 |
url(可选): | url为字符串,用来ajax后台获取数据,返回的数据格式为data参数一样。 |
width(可选): | 下拉框的宽度,默认使用输入框宽度。 |
callback(可选): | 选中行后按回车或单击时回调的函数,用于返回选中行的其他数据及做一些操作。 |
三、示例:
1、本地数据:html代码:
<input type="text" id="tt" value="" class="text" />
javascript代码:
$(function(){ $("#tt").bigAutocomplete({ width:543, data:[{title:"中国好声音",result:{ff:"qq"}}, {title:"中国移动网上营业厅"}, {title:"中国银行"}, {title:"中国移动"}, {title:"中国好声音第三期"}, {title:"中国好声音 第一期"}, {title:"中国电信网上营业厅"}, {title:"中国工商银行"}, {title:"中国好声音第二期"}, {title:"中国地图"}], callback:function(data){ alert(data.title); } }); })
js中data里的result可以不写。
2、ajax请求:
html代码:
<input type="text" id="company" value="" class="text" />
javascript代码:
$(function(){ $("#tt").bigAutocomplete({ width:543, url:'http://localhost/test/suggestCom', callback:function(data){ //alert(data.title); } }); })
服务端返回数据格式:
{"data":[{"title":"\u5317\u4eac\u73b0\u4ee3"},{"title":"\u5317\u4eac\u57ce\u5efa\u96c6\u56e2\u6709\u9650\u8d23\u4efb\u516c\u53f8"},{"title":"\u5317\u4eac\u5efa\u5de5\u96c6\u56e2\u6709\u9650\u8d23\u4efb\u516c\u53f8"},{"title":"\u5317\u4eac\u9996\u90fd\u65c5\u6e38\u96c6\u56e2\u6709\u9650\u8d23\u4efb\u516c\u53f8"},{"title":"\u5317\u4eac\u533b\u836f\u96c6\u56e2\u6709\u9650\u8d23\u4efb\u516c\u53f8"},{"title":"\u5317\u4eac\u4e00\u8f7b\u63a7\u80a1\u6709\u9650\u8d23\u4efb\u516c\u53f8"},{"title":"\u5317\u4eac\u91d1\u9685\u96c6\u56e2\u6709\u9650\u8d23\u4efb\u516c\u53f8"},{"title":"\u5317\u4eac\u71d5\u4eac\u5564\u9152\u96c6\u56e2\u516c\u53f8"},{"title":"\u5317\u4eac\u5e02\u71c3\u6c14\u96c6\u56e2\u6709\u9650\u8d23\u4efb\u516c\u53f8"},{"title":"\u5317\u4eac\u4f4f\u603b\u96c6\u56e2\u6709\u9650\u8d23\u4efb\u516c\u53f8"}]}
服务端的代码:(以ThinkPHP示例)
public function suggestCom(){ $wd = $_POST['keyword']; $keywords = $wd; $company_model = M('Company'); $res = $company_model->where("name like '%".$keywords."%' or abbr like '%".$keywords."%' ")->limit(10)->select(); foreach($res as $v){ $suggestions[]= array('title' => $v['name']); } echo json_encode(array('data' => $suggestions)); }
默认是POST过来的数据,名称是keyword,返回数据是和本地data一致的。
相关文章推荐
- 系统优化(一)Maven打包同一个jar有不同的:版本+时间戳(解决思路)
- Leetcode #17 Letter Combinations of a Phone Number
- 在windows上编译scite
- 有道词典Demo(WebView)
- 原型继承2
- [LeetCode] Implement Queue using Stacks
- 死锁
- poj 2947
- qt5.5 windows
- 排序算法之快速排序算法
- 毕业后的五年拉开大家差距的原因在哪里?
- c#第五次作业
- Razor模板解密
- [Perl]对*.zip文件操作的记录<一>
- poj 3026 bfs+prim Borg Maze
- 【XML】XL,SL,PL三者之间的区别与联系
- readLine()方法
- 1034. Head of a Gang (30)
- windows 常用软件
- HQL: Hibernate查询语言