jQuery插件之Ajax自动完成

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

闲话不多说直接上代码

本文使用到的文件有：

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

引用文件：

使用方法：

定义一个id 为query的文本框

  
 
 
 

   
  
  
  
  
   
  
  
  
        $(function() {  
   
  
  
  
            var onAutocompleteSelect =function(value, data) {  　　  
   
  
  
  
 　　　　　　　　　　//根据返回结果自定义一些操作  
   
  
  
  
            };   
   
  
  
  
            var options = {  
   
  
  
  
                serviceUrl: 'QueryServices.ashx',//获取数据的后台页面  
   
  
  
  
                width: 700,//提示框的宽度  
   
  
  
  
                delimiter: /(,|;)\s*/,//分隔符  
   
  
  
  
                onSelect: onAutocompleteSelect,//选中之后的回调函数  
   
  
  
  
                deferRequestBy: 0, //单位微秒  
   
  
  
  
                params: { country: 'Yes' },//参数  
   
  
  
  
                noCache: false //是否启用缓存 默认是开启缓存的  
   
  
  
  
            };  
   
  
  
  
 
   
  
  
  
            a1 = $('#easyQuery').autocomplete(options);  
   
  
  
  
                          
   
  
  
  
        });  
   
  
  
  
}  
   
  
  
  
      
   
  
  
  
 
  
 
 
 

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

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

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

 
 
 
 

  
  
  
  
{  
  
  
  
  
 query:'Li', //前台输入的查询内容  
  
  
  
  
 suggestions:['Liberia','Libyan Arab Jamahiriya','Liechtenstein','Lithuania'],//这里就是下拉框里显示的数据了 和下面的data是对应的 属于一键一值  
  
  
  
  
 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

文章题目：jQuery插件之Ajax自动完成
当前网址：http://www.shufengxianlan.com/qtweb/news15/410565.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联