使用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 ，原理都差不多