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

首先介绍一下原理：

文本框下方是一个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 = http://www.mamicode.com/this.innerHTML;>
在这里需要注意，因为用户输入很多都是汉字，所以需要使用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");                StringBuilder str=new StringBuilder();        for (int i = 0; i < set.Tables[0].Rows.Count; i++)  //遍历表并给字符串赋值         {                str.Append("," + set.Tables[0].Rows[i].ItemArray[0].ToString());                    }        if (str.Length > 1)  //删除字符串首部的逗号        {            str.Remove(0, 1);        }        Response.Write(str.ToString());                //第二种方式         //使用sql存储过程        //SqlCommand cmd = new SqlCommand();        //cmd.CommandType = CommandType.StoredProcedure;        //cmd.CommandText = "search";        //cmd.Parameters.Add("@vin",SqlDbType.VarChar,100,"theme");        //cmd.Parameters[0].Value = http://www.mamicode.com/my_search;>
 
因为ajax传参之后，要想获取后台返回值，必须控制后台respon.write输出内容的格式，所以介绍了两种方式：
一种是用C#，另一种是用SQl ，原理都差不多
 
使用javascript ajax C#实现类似百度的搜索框效果