(最近新弄的几个小demo) 之 (模仿百度搜索框)后续更新中，比较实用

类似于一个百度的搜索，输出汉字或者字母在下面显示一个div 上面的数据是每次文本框控件的onkeyup事件后动态绑定的

传向后台参数去数据库查然后返回js字符串前台绑定做不到百度那么快的响应但是还是能用的

代码连接下载

http://www.baidupcs.com/file/e79ec71b4e34e7b0e419f7db9ab95c46?fid=2467423588-250528-2904392524&time=
1362979535&sign=FDTA-DCb740ccc5511e5e8fedcff06b081203-ljLhFldhAtuvjKTqSjn4qTkD5IQ%3D&expires=1h

下载的代码里面没有数据库和后台访问数据库的代码，这里把放上

数据库设计 id name(可搜索的条件) namepy(可搜索条件) 其他无所谓了。自己定义

string sql = string.Format("select top 10 Id,HopName from HopL where HopPY like '%{0}%'", strpy);
DataTable dt = DBTools.DB.ExecuteDataSet(CommandType.Text, sql).Tables[0];
if (dt.Rows.Count <= 0)
{
sql = string.Format("select top 10 Id,HopName from HopL where HopName like '%{0}%'", strpy);
dt = DBTools.DB.ExecuteDataSet(CommandType.Text, sql).Tables[0];
}
return Windows_Json.JsonHelper.ToJson(dt);

拼音查询不到，就查了名称

这里用到了一个datatable转换json的类

public static string ToJson(DataTable dt)
{
StringBuilder jsonString = new StringBuilder();
jsonString.Append("[");
DataRowCollection drc = dt.Rows;
for (int i = 0; i < drc.Count; i++)
{
jsonString.Append("{");
for (int j = 0; j < dt.Columns.Count; j++)
{
string strKey = dt.Columns[j].ColumnName;
string strValue = drc[i][j].ToString();
Type type = dt.Columns[j].DataType;
jsonString.Append("\"" + strKey + "\":");
strValue = StringFormat(strValue, type);
if (j < dt.Columns.Count - 1)
{
jsonString.Append(strValue + ",");
}
else
{
jsonString.Append(strValue);
}
}
jsonString.Append("},");
}
//zhanghao 2012 01 14 原因：会将匹配的 ‘[’ 删除
if (drc.Count > 0)
{
jsonString.Remove(jsonString.Length - 1, 1);
}

jsonString.Append("]");
return jsonString.ToString();
}

大家拿过去用就可以了。

现在我们主要来关心一下前台，前台的编写比后台麻烦

首先一个文本框，下面是要显示的div 下载的代码里面大家看一下，你如果只需要一部分，拿出来用就可以了。

首先绑定事件

$(document).ready(function () {
$('#txt').bind('keyup', processKeyup);
});

然后处理鼠标操作事件

function processKeyup(event) {
//var myEvent = event || windows.event;
var keyCode = event.keyCode;
if (keyCode == 13) {

processEnter();//按下 enter键的操作
}
else if (keyCode == 38 || keyCode == 40) {
processKeyUpAndDown(keyCode);//按下上下键的操作
}
else {
show();//按下其他键就是查询数据了。
}
}

按下enter键的操作把当前所选中的内容放到文本框里然后去执行方法我这里是绑定数据

function processEnter() {
if (highLightIndex != -1) {
$('txt').val($('#div_content').children().eq(highLightIndex).html());
var tmp = $('#div_content').children().eq(highLightIndex).html();
$('#div_content').html('').hide();
hid22(tmp);
}
}

按下上下键的操作