先看一下最终效果  样式不太好看，但是功能是完全可行的，在文本框中输入文字之后，会实现自动搜索的功能。

首先介绍一下原理：

文本框下方是一个div，里面是一个ul标签，初始状态此ul中不包含任何的li标签。

当文本框文字改变的时候，使用ajax把文本框内容取出来，传递到后台，在后台中从数据库查询数据并把结果返回到前台页面。

返回的结果格式设置为：A，B，C，D；以便在前台实现字符串分割。

前台页面把返回的字符串切分成数组，依次遍历并给ul添加li节点。

具体方法：

①前台布局就不多说了 ，重要的是给文本框添加事件 onPropertyChange ="change(this)" ，当文字改变时触发，这个是在IE下的，火狐也有对应的，大家可以搜索一下。

@js代码：

<script language="javascript" type="text/javascript">
    function ajax(url, funSucc, fail) {
        //1.解决浏览器兼容性问题 创建AJAX对象
        if (window.XMLHttpRequest) {
            var oAjax = new XMLHttpRequest();
        }
        else {
            var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //2.连接服务器
        oAjax.open("GET", url, true);
        //3.发送请求
        oAjax.send();
        //4.接收返回
        oAjax.onreadystatechange = function () {

            if (oAjax.readyState == 4) { //响应解析完成
                if (oAjax.status == 200) {
                    funSucc(oAjax.responseText);


                }
                else { if (fail) { fail(oAjax.status); } }

            }

        }

    };

 
    function change(obj) {
        var odiv = document.getElementById("div_context");
        odiv.style.display = "block";       //div默认不可见，文文字改变之后变为可见状态
        var text = document.getElementById("Text1");
        var add_ul = document.getElementById("ul_1");
        add_ul.innerHTML = "";              //每次改变之后，先把之前的内容清空
        var input = obj.value;
        var url = "search.aspx?search=" + input + "&t=" + Math.random(); //给后台传参，防止缓存
        var arr = new Array();              //保存数据用的数组

        ajax(url, function (retext) {       //调用ajax，参数retext就是后台的返回值

            arr = retext.split(",");        //切分字符串
            for (var i = 0; i < arr.length; i++) {
                var new_li = document.createElement("li");  //新建节点
                new_li.innerHTML = arr[i];
                add_ul.appendChild(new_li);
            }

            var lis = add_ul.getElementsByTagName("li"); //为每个添加的节点设置单击事件
            for (var i = 0; i < lis.length; i++) {      
                lis[i].onclick = function () {
                    text.value = this.innerHTML;
                    odiv.style.display = "none";
                }

            }

        });
    }   
</script>

在这里需要注意，因为用户输入很多都是汉字，所以需要使用gb2312字符集，在web.config文件中加入

<system.web>

   <globalization requestEncoding="gb2312" responseEncoding="gb2312" culture="zh-CN" fileEncoding="gb2312" />

    </system.web>

③后台代码
在pageload中：

        string my_search = Request.QueryString["search"];
        SqlConnection con = new SqlConnection();
        con.ConnectionString = "data source=.\\sqlexpress; initial catalog=ff; user id=sa;password=123";//连接字符串

        
        //第一种方式
         SqlCommand cmd = new SqlCommand();
        cmd.CommandText = "select top 7 [theme] from table1 where theme like '%"+my_search+"%'"; //最多显示七条数据
        cmd.Connection = con;
        SqlDataAdapter ada = new SqlDataAdapter();
        ada.SelectCommand = cmd;
        DataSet set=new DataSet();
        ada.Fill(set,"theme")