使用javascript ajax C#实现类似百度的搜索框效果

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

首先介绍一下原理：

文本框下方是一个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");
        
        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 = my_search;
        //cmd.Connection = con;
        //SqlDataAdapter ada = new SqlDataAdapter();
        //ada.SelectCommand = cmd;
        //DataSet set = new DataSet();
        //ada.Fill(set, "theme");

        //string str_response = set.Tables[0].Rows[0].ItemArray[0].ToString();

        //Response.Write(str_response);


        Response.End();
    }
}
/*

存储过程 search：
 
ALTER PROCEDURE dbo.search 
(@vin varchar(100)
 )
	
AS
	declare @str varchar(700);
	set @str=(select top 7 [theme]   from forum where theme like ‘%‘+@vin+‘%‘ for xml path(‘‘));
	set @str=stuff(replace(replace(@str,‘</theme>‘,‘‘),‘<theme>‘,‘,‘),1,1,‘‘)  


	select @str;
	RETURN  ;
*/

因为ajax传参之后，要想获取后台返回值，必须控制后台respon.write输出内容的格式，所以介绍了两种方式：

一种是用C#，另一种是用SQl ，原理都差不多