星期一, 2015-12-21 13:50 — shiping1

jQuery插件之Ajax自动完成

2012-04-27 10:00 小马在唱歌小马在唱歌的博客字号：T | T

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

AD：【51CTO技术沙龙】移动时代数据挖掘和行为分析—让用户数据更精彩！

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

闲话不多说直接上代码

本文使用到的文件有：

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

引用文件：

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

使用方法：

定义一个id 为query的文本框

<input type="text" name="query" id="query" />

<script type="text/javascript">
$(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);
});
}
</script>

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

刚才提到 '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

来自 http://developer.51cto.com/art/201204/332426.htm

学习AJAX--用JQuery实现文本框自动完成

标签： jquery autocomplete function webservice xhtml 数据库

2011-12-30 14:46 1240人阅读评论(0) 收藏举报

分类：

asp.net（8）

文本框自动完成功能主要实现当在文本框中输入一定长度的字符后，能自动从服务器中获取与之匹配的所有数据，列表供用户选择。
本事例采用sql数据库，当用户在文本框中输入字符时，自动从数据库中取出与之匹配的其它单词，供用户选择，使用JQery实现。

代码如下：

客户端：

[html]view plaincopyprint? 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" >  
<head>  
    <title></title>  
  
    <script src="js/jquery-1.7.js" type="text/javascript"></script>  
    <script type="text/javascript">  
        $(function() {  
  
            $("#Text1").keyup(function() {  
                $("#autodiv").attr("style", "display:block");  
                $.post("autocomplete.ashx", { "key": $(this).val() }, function(data, status) {  
                    if (status = "success") {  
                        var items = $.parseJSON(data);  
                        $("#autoList").empty();  
                        for (var k = 0; k < items.length; k++) {  
                            var li = $("<li>" + items[k] + "</li>");  
                            $("#autoList").append(li);  
                        }  
                        $("#autoList li").click(function(e) {  
                            $("#Text1").val($(this).text());  
                            $("#autodiv").attr("style", "display:none");  
                        });  
                    }  
                });  
            });  
        });  
    </script>  
</head>  
<body>  
<input id="Text1" type="text" />  
<div id="autodiv">  
<ul id="autoList">  
</ul>  
</div>  
</body>  
</html>  

处理程序：

[csharp]view plaincopyprint? 
using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Web;  
using System.Web.Services;  
using System.Web.Script.Serialization;  
using AJAXTest.DataSetTopicTableAdapters;  
  
namespace AJAXTest  
{  
    /// <summary>  
    /// $codebehindclassname$ 的摘要说明  
    /// </summary>  
    [WebService(Namespace = "http://tempuri.org/")]  
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]  
    public class autocomplete : IHttpHandler  
    {  
  
        public void ProcessRequest(HttpContext context)  
        {  
            context.Response.ContentType = "text/plain";  
            string key = context.Request["key"];  
            List<string> list = new List<string>();  
            var adapter = new autocompleteTableAdapter();  
            var t = adapter.GetDataBy(key);  
            foreach (var row in t)  
            {  
                list.Add(row.Description.Trim());  
            }  
            JavaScriptSerializer jss = new JavaScriptSerializer();  
            context.Response.Write(jss.Serialize(list));  
        }  
  
        public bool IsReusable  
        {  
            get  
            {  
                return false;  
            }  
        }  
    }  
}  

来自 http://blog.csdn.net/dreamboy0908/article/details/7165012

普通分类:

jquery

You are here

学习AJAX--用JQuery实现文本框自动完成

jQuery插件之Ajax自动完成

友情链接

搜索表单

用户登录

You are here

学习AJAX--用JQuery实现文本框自动完成

jQuery插件之Ajax自动完成

友情链接