(最近新弄的几个小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 class="main">
<div class="global">
<ul id="k">
<li>
<input type="text" id="txt" style=" 190px; height: 20px;" /></li></ul>
</div>
<div id="t">
<div class="m" style="display: none; height: auto;" id="div_content">
</div>
</div>
<input type="text" style="display: none" />
</div>

首先一个文本框，下面是要显示的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);
}
}

按下上下键的操作

function processKeyUpAndDown(keyCode) {
var words = $('#div_content').children();当前所显示div的所有标签
var num = words.length;
if (num <= 0) return;
changeToWhite();//选中标签
highLightIndex = ((keyCode != 38 ? num + 1 : num - 1) + highLightIndex) % num;//计算当前在那个标签上面
words.eq(highLightIndex).css('background-color', 'pink');//更换颜色
$('#txt').val(words.eq(highLightIndex).html());//把选中的标签的文字放到文本框里面
}
function changeToWhite() {
if (highLightIndex != -1) {
$('#div_content').children().eq(highLightIndex).css('background-color', 'gray');
}
}