|
|
51CTO旗下网站
|
|
移动端

jQuery插件之Ajax自动完成

本文要介绍的这个JQuery 插件名叫Ajax Autocomplete 顾名思义,ajax 也就是用ajax的方式获取搜索提示信息然后返回呈现出来

作者:小马在唱歌来源:小马在唱歌的博客|2012-04-27 10:00

平时用百度,谷歌搜索的时候,会有一个下,拉列表进行提示,这是一个非常好的功能。本文要介绍的这个JQuery 插件名叫Ajax Autocomplete 顾名思义,ajax 也就是用ajax的方式获取搜索提示信息然后返回呈现出来,上效果图

闲话不多说直接上代码

本文使用到的文件有:

1,点击 Ajax Autocomplete for jQuery, version 1.1.3  下载

引用文件:

  1. <script type="text/javascript" src="jquery-1.3.2.min.js"></script>  
  2. <script type="text/javascript" src="jquery.autocomplete.js"></script>  

使用方法:

定义一个id 为query的文本框

  1. <input type="text" name="query" id="query" /> 
  1. <script type="text/javascript">  
  2.         $(function() {  
  3.             var onAutocompleteSelect =function(value, data) {    
  4.  //根据返回结果自定义一些操作  
  5.             };   
  6.             var options = {  
  7.                 serviceUrl: 'QueryServices.ashx',//获取数据的后台页面  
  8.                 width: 700,//提示框的宽度  
  9.                 delimiter: /(,|;)\s*/,//分隔符  
  10.                 onSelect: onAutocompleteSelect,//选中之后的回调函数  
  11.                 deferRequestBy: 0, //单位微秒  
  12.                 params: { country: 'Yes' },//参数  
  13.                 noCache: false //是否启用缓存 默认是开启缓存的  
  14.             };  
  15.  
  16.             a1 = $('#easyQuery').autocomplete(options);  
  17.                           
  18.         });  
  19. }  
  20.     </script>  
  21.  

下面就是后台获取数据的代码了

刚才提到 'QueryServices.ashx'  这个文件 这就是后台处理数据的文件

因为这个插件要求返回结果必须是一个JSON对象 这个JSON对象的格式是这样的

  1. {  
  2.  query:'Li', //前台输入的查询内容  
  3.  suggestions:['Liberia','Libyan Arab Jamahiriya','Liechtenstein','Lithuania'],//这里就是下拉框里显示的数据了 和下面的data是对应的 属于一键一值  
  4.  data:['LR','LY','LI','LT']//这里和suggestions对应 作为suggestions的键  

suggestions 对应前台 onAutocompleteSelect =function(value, data) 回调函数的 value 而

data 顾名思义 对应data

插件介绍到此为止  数据传送格式已和大家 列出大家可根据自己所用语言自行序列化。

原文链接:http://www.cnblogs.com/maxiao/archive/2012/04/25/2470712.html

【编辑推荐】

【责任编辑:张伟 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

程序员教程(第2版)

本书按照人事部、信息产业部全国计算机技术与软件专业技术资格(水平)考试程序员考试大纲编写,是对2004版的修订版,内容包括计算机系统、...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊