ajax实现智能提示搜索功能

1。效果图：

两。实现过程：
思想:
三。部分代码：

Html：

眉目传情
CSS代码：

{ *
填料：0px；
保证金：0px；
}

{ #搜索
边距：10px；
身高：37px；
宽度：550px；
}
#搜索{ div
浮点数：左；
}
{ # txttitle
身高：35px；
宽度：440px；
行高：35px；
# 4791ff solid 1px边框；
}
# btnselect一{
宽度：100px；
身高：37px；
背景：# 167ed9；
显示块；
行高：37px；
颜色：# ffffff；
文本对齐：中心；
}
答：链接{
文字装饰：无；
}
答：悬停{
光标：指针；
}
{ # dtitles
宽度：540px；
身高：90px；
# cccccc solid 1px边框；
显示：无；
字体大小：12px；
}
{。1
背景：# f0f0f0；
}
JS代码：
（$函数）

{
在 1之后。加载页面时，会发现文本框的内容触发事件。
$（# txttitle）。Keyup（function（））
{
//2. 获取文本框的内容并注意空格。
var title=美元。修剪（$（# txttitle）。瓦迩（）））；
在 3之后。获取输入的内容，通过Ajax将其传回后台。
美元。后（ / handler3 .ashx
{
如果（title = { ）
$（# dtitles ）藏（）；
}
其他的
{
显示/显示div，使其清楚
$（# dtitles ），表明（）。Html（）；
如果（数据= {）
$（# dtitles）。文本（没有相关数据！；
}
{其他
$（# dtitles ）把（数据）；
在 4之后。鼠标上移，添加背景
$（），Hover（函数（））
{
$（这）。AddClass（理）；
}（函数）
{
$（这）。RemoveClass（理）；
}）；
}
}
}）；
}）；
}）；
Ajax：
public void ProcessRequest（HttpContext上下文）
{
在 1之后。已经提交了，我们只好接受了。
字符串名称=上下文；
2。获取SQL语句
字符串StrSQL =字符串。格式（选择前5题从rnews，标题是{ 0 } %）；
3。你如何让SQL来做这件事
DataTable dt = sqlhelper.executedatasettext（StrSQL，null）。表{ 0 }；
4。我们最后要返回的是一个列表，一个字符串字符串。
StringBuilder某人新的StringBuilder（）；
4.1确定SQL结果中是否有数据。
如果（dt.rows.count > 0）
{
/ / 4.1.1
某人追加（）；
为（int i = 0；i < dt.rows.count；i++）
{
某人追加（string.format（{ 0 }
}
某人追加（）；
}
context.response.write（sb.tostring（））；
}

以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。