js autocomplete 搜索提示关键字、选择关键字

最新推荐文章于 2024-06-06 09:43:25 发布

lala133

最新推荐文章于 2024-06-06 09:43:25 发布

阅读量678

点赞数 2

分类专栏： js技术文章标签： js-搜索-asp

js技术专栏收录该内容

1 篇文章 0 订阅

订阅专栏

http://jqueryui.com/download/ 官网有最新的版本下载和使用方法
下面是我用到写的
下面是asp页面

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>

<!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 id="Head1" runat="server">
    <title></title>
<link href="css/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
<script src="scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="scripts/jquery.autocomplete.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#txtSearch").autocomplete(encodeURI("Handler2.ashx"),
        {
            minChars: 1,  //至少输入的字符数，default：1；如果设为0，在输入框内双击或者删除内容时显示列表。 
            width: 220,  //下拉框的宽度，default：input元素的宽度
            max: 30, //下拉项目的个数，default：10
            scrollHeight: 300, // 下拉框的高度， Default: 180
            scroll: true,    //当结果集大于默认高度时，是否使用滚动条，Default: true
            multiple: false, //是否允许输入多个值. Default: false
            autoFill: false,   // 是否自动填充. Default: false
            multipleSeparator: " ",    //输入多个字符时,用来分开各个的字符. Default: ","
            matchCase: false,     //是否开启大小写敏感
            selectFirst: true,  // 如果设置成true,下拉列表的第一个值将被自动选择, Default: true
            matchSubset: true,   //是否启用缓存
            cacheLength: 10, //缓存的长度.即缓存多少条记录.设成1为不缓存.Default: 10
            delay: 400, //击键后的延迟时间(单位毫秒).Default: 远程为400 本地10
            mustMatch: false,   //如果设置为true,只会允许匹配的结果出现在输入框,当用户输入的是非法字符时,将被清除， Default: false
            matchContains: true, //决定比较时是否要在字符串内部查看匹配.Default: false
            dataType: 'json', //返回的数据类型为JSON类型  
            parse: function (data) {//解释返回的数据，把其存在数组里  
                var parsed = [];
                for (var i = 0; i < data.length; i++) {
                    parsed[parsed.length] = {
                        data: data[i],
                        value: data[i].bid,
                        result: data[i].cname //返回的结果显示内容  
                    };
                }
                return parsed;
            },
            formatItem: function (item) {//显示下拉列表的内容  
                return  item.cname;
            },
            formatMatch: function (item) {
                return item.cname;
            },
            formatResult: function (item) {
                return item.cname;
            }
        }).result(function (event, item, formatted) {//把返回的结果内容显示在其他文本框上              
            $("#ortherid").val(item.bid);
        }
        );
    });       
</script> 
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>
        <asp:TextBox ID="ortherid" runat="server"></asp:TextBox>
    </div>
    </form>
</body>
</html>

下面是处理程序

<%@ WebHandler Language="C#" Class="Handler2" %>

using System;
using System.Web;
using System.Collections.Generic;
using System.Web.Script.Serialization;
using System.Data.SqlClient;
using System.Data;
using System.Configuration;
using System.Text;

public class Handler2 : IHttpHandler {

    public void ProcessRequest(HttpContext context)
    {
        string strConn = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        string cname = context.Request.QueryString["q"];
        using (SqlConnection conn = new SqlConnection(strConn))
        {
            using (SqlCommand cmd = new SqlCommand())
            {
                cmd.CommandText = "select top 100 cname,bid from SearchInfo where " +
                "cname like '" + cname + "%'";
                cmd.Connection = conn;
                conn.Open();
                SqlDataAdapter dr = new SqlDataAdapter(cmd);
                DataSet ds = new DataSet();
                dr.Fill(ds);
                conn.Close();
                string strJson = SerializeDataTable(ds.Tables[0]);
                context.Response.Write(strJson);
            }
        }
    }



    /// <summary>DataTable序列化
    /// </summary>
    /// <param name="dt"></param>
    /// <returns></returns>
    public string SerializeDataTable(DataTable dt)
    {
        JavaScriptSerializer serializer = new JavaScriptSerializer();
        List<Dictionary<string, object>> list = new List<Dictionary<string, object>>();
        foreach (DataRow dr in dt.Rows)//每一行信息，新建一个Dictionary<string,object>,将该行的每列信息加入到字典
        {
            Dictionary<string, object> result = new Dictionary<string, object>();
            foreach (DataColumn dc in dt.Columns)
            {
                result.Add(dc.ColumnName, dr[dc].ToString());
            }
            list.Add(result);
        }
        return serializer.Serialize(list);//调用Serializer方法 
    }



    public bool IsReusable
    {
        get
        {
            return false;
        }



    }
}

lala133

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js autocomplete 搜索提示关键字、选择关键字

http://jqueryui.com/download/ 官网有最新的版本下载和使用方法下面是我用到写的下面是asp页面<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
复制链接

扫一扫

专栏目录