Ajax实现智能提示搜索功能

一、效果图：

二、实现过程：

思路：

三、部分代码：html:

div id=' search box ' divinput type=' text ' id=' TxtTitle '/div id=' Btensel ' a href=' JavaScript :Google/a/div/div id=' dtitles '/div CSS代码：

* { padd :0 pxmargin :0 px } #搜索框{ margin-top :10 px；高度：37 px宽度width :550 px } # search box div { float 3360 left } # Txtittle { height :35 px宽度宽度：440像素线高：35 pxborder:solid 1px # 4791FF} #选择一个{宽度：100像素高度：37 px背景技术# 167ED9显示：块；线高：37 pxcolor: # ffffff文本对齐：居中；} a :链接{ text-decoration : none} :悬停{光标：指针；} # dtitles { width:540px高度：90 px边框：实心1px # CCCCCC；display : none font-size :12 px；} .li1 {背景： # f0f 0；}js代码：

$(function (){ //1 .页面加载之后，找到文本框的内容对它触发一个事件$(' # TxtItle ').keyup(function () { //2 .获取到文本框的内容，注意去空格var title=$ .修剪($(' # TxtItle ').val())；//3.获取到输入的内容之后，就要通过创建交互式、快速动态网页应用的网页开发技术传给后台$.post('/Handler3.ashx '，{ 'title': title }，function(data){ if(title==' '){ $(' # dtitles ').hide()；} else { //显示展示div，把它清空$('#dtitles ').显示()。html(" ")；if (data=='') { $('#dtitles ').文本('没有相关数据!');} else { $('#dtitles ').追加（数据);//4.鼠标移上去之后，加一个背景$('li ').悬停(function () { $(this)).addCLaSS(' li1 ')；}，function () { $(this).移除CLaSS(' li1 ')；});} } });});});ajax:

公共无效进程请求(HttpContext上下文){ //1。提交过来之后，我们要接收字符串标题=上下文。请求。表格['标题'];//2.得到一个结构化查询语言语句字符串strsql=字符串。格式('从RNews中选择前5个标题，其中标题如' %{0}% ',标题);//3.那得到结构化查询语言怎么去做处理？数据表dt=SqlHelper .ExecuteDataSetText(strsql，null).表[0];//4.我们最后要返回的是一个列表，要做字符串拼凑StringBuilder sb=new StringBuilder()；//4.1判断得到的结构化查询语言结果里面是否有数据if (dt .行数。计数0) { //4.1.1 sb .追加(' ul ')；for(int I=0；我决定。行。计数；某人。追加（字符串。格式(' li{0}/li '，dt .行[i][0].ToString()))；}某人。追加('/ul ')；}上下文。给（某人)写信. ToString())；}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。