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

最新推荐文章于 2022-04-02 21:34:26 发布

姣游天下

最新推荐文章于 2022-04-02 21:34:26 发布

阅读量3.1k

点赞数

分类专栏： asp.net 文章标签： jquery autocomplete function webservice xhtml 数据库

本文链接：https://blog.csdn.net/dreamboy0908/article/details/7165012

版权

asp.net 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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

代码如下：

客户端：

<!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>

处理程序：

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;
            }
        }
    }
}

姣游天下

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
学习AJAX--用JQuery实现文本框自动完成

文本框自动完成功能主要实现当在文本框中输入一定长度的字符后，能自动从服务器中获取与之匹配的所有数据，列表供用户选择。本事例采用sql数据库，当用户在文本框中输入字符时，自动从数据库中取出与之匹配的其它单词，供用户选择，使用JQery实现。代码如下：客户端： $(function() {
复制链接

扫一扫