文本框输入下拉智能提示---sql

新手第一次写 一个文本框输入文字后智能提示相似的项在下面显示。

 

C#  code：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text;
using System.Data.SqlClient;
using System.Configuration;
using System.Data;

public partial class test_znts_Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (Request.QueryString["type"] != null && Request.QueryString["type"].Equals("exec"))
        {
            Response.ClearContent(); Response.Write(str1()); Response.End();
        }
    }
    protected string str1()
    {
        string str = "";
        string s = Request.QueryString["txt"].ToString();
        if (s == "")
        { return ""; }
        SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["sqlConn"].ConnectionString);
        string sql = "select distinct code from protestcode where code like '" +s+ "%'";
        SqlDataAdapter sda = new SqlDataAdapter(sql, conn);
        DataSet ds = new DataSet();
        sda.Fill(ds, "table");
        int count = Convert.ToInt32(ds.Tables["table"].Rows.Count);
        //StringBuilder sb = new StringBuilder();
        for (int i = 0; i < count; i++)
        {
            // sb.Append("<li>");
            // sb.Append(ds.Tables["table"].Rows[i][0].ToString());
            // sb.Append("</li>");
            str = ds.Tables["table"].Rows[i][0].ToString() + "," + str;
        }
        str = str.Trim(',');
        return str;
    }
}

 

 

HTML：

<%@ Page Title="" Language="C#" MasterPageFile="~/Content.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="test_znts_Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<script type="text/javascript" language="javascript" src="../JQuery/jquery-1.8.2.min.js"></script>
<style type="text/css">
.on_changes{ display:none; list-style:none; width:144px; border:solid 1px gray;}
.show{display:block;}
.toggleclass{ background-color:Gray;}
</style>
<script type="text/javascript">
    var indexLi = 0;
    $(function () {
        indexLi = 0;
      
        //键盘上下键
        function keychang(up) {
            if (up == "up") {
                if (indexLi == 0) {
                    indexLi = $(".on_changes").children().length - 1;
                } else {
                    indexLi--;
                }
            } else {
                if (indexLi == $(".on_changes").children().length - 1) {
                    indexLi = 0;
                } else {
                    indexLi++;
                }
            }
            $(".on_changes").children().eq(indexLi).addClass("toggleclass").siblings().removeClass();
        }
        //调用
        $(this).keydown(function (event) {
            if (event.which == 38) {//向上
                keychang("up")
            } else if (event.which == 40) {//向下
                keychang()
            } else if (event.which == 13) { //回车
                var liVal = $(".on_changes").children().eq(indexLi).html();
                $("#<%=txtans.ClientID %>").val(liVal);
                $("#txt").val(liVal);
                $(".on_changes").removeClass("show");
                $("#<%=txtans.ClientID %>").focus();
                $("#<%=txtans.ClientID %>").select();
            }
        })
    })
    function diaoyong() {
    //方向键+回车键不触发
        if (event.keyCode == 13 || event.keyCode == 38 || event.keyCode == 40) {
            return false;
        }
        else {
            indexLi = 0;
            //alert($("#<%=txtans.ClientID %>").val());
            var v = $("#<%=txtans.ClientID %>").val();
            var s1 = getType();
            //alert(s1);
            var va = s1.split(',');
            $(".on_changes li").each(function () {
                $(this).remove();
            })
            //alert(va.length);
            //添加li标签
            for (var i = 0; i < va.length; i++) {
                // alert(va[i]);
                $(".on_changes").append("<li>" + va[i] + "</li>")
            }
            $(".on_changes").addClass("show");
            //单击选择事件
            $(".on_changes li").bind("click", function (index) {
                $(".on_changes li").each(function () {
                    $(this).removeClass("toggleclass");
                })
                $(this).addClass("toggleclass");
                $("#<%=txtans.ClientID %>").val($(this).html());
                $("#txt").val($(this).html());
                $(".on_changes").removeClass("show");
                $("#<%=txtans.ClientID %>").focus();
                $("#<%=txtans.ClientID %>").select();
            })
            //鼠标移动事件
            $(".on_changes li").hover(function () {
                $(".on_changes li").each(function () {
                    $(this).removeClass("toggleclass");
                })
                $(this).addClass("toggleclass");
                //获取当前的索引号
                indexLi = $(".on_changes li").index(this);
            }, function () {
                $(this).removeClass("toggleclass");
                indexLi = 0;
            });
            //调用后台方法，传递参数
            function getType() {
                x = window.XMLHttpRequest ? new window.XMLHttpRequest : new ActiveXObject("Msxml2.XMLHTTP")
                x.open("GET", "<%= Request.Url.LocalPath %>?txt=" + v + "&type=exec&" + Date.parse(new Date()), false);
                x.send(null);
                if (x.status == 200) {
                    return x.responseText;
                }
                else {
                    return "";
                }
            }
        }
    }
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div><asp:TextBox ID="txtans" runat="server" onkeyup="diaoyong()" Width="144px"></asp:TextBox></div>
<div>
<input type="text" id="txt" onkeyup="diaoyong()" name="text" style="width:144px" />
<ul class="on_changes">
   
  </ul>
</div>
</asp:Content>