标签：ajax c# 百度搜索 自动搜索 autocomplete
先看一下最终效果 样式不太好看，但是功能是完全可行的，在文本框中输入文字之后，会实现自动搜索的功能。
首先介绍一下原理：
文本框下方是一个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 ，原理都差不多
使用javascript ajax C#实现类似百度的搜索框效果
标签：ajax c# 百度搜索 自动搜索 autocomplete
原文地址：http://blog.csdn.net/i99121570/article/details/24795871
