ASP.NET搭配Ajax实现搜索提示功能(3)

function selectOverDiv(div_value, i) { div_value.className = "search_link_over"; var my_div = document.getElementById("search_div").getElementsByTagName("div") var the_num = my_div.length; for (var k = 0; k < the_num; k++) { selectOut(my_div[k]); if (k == i) { selectOver(my_div[k]) } } isCheckDiv = true; x = i; } function selectOutDiv(div_value,i) { isCheckDiv = false; div_value.className = "search_link"; x = i; } function setSearch(value) { //清空文本框的内容改变事件是因为我们给选中值复制时 该事件会触发 //所以先清空次事件 ClearOS(); document.getElementById("txtSearch").value = value; //设置该属性为false 在调用HiddenDiv函数会隐藏提示结果DIV isCheckDiv = false; HiddenDiv(); //在赋值完成后再次附加修改时间 getOs(); } function ShowDiv() { var content = document.getElementById("txtSearch").value; var divConten = document.getElementById("search_div").innerHTML; if (content != '' && divConten != '') { document.getElementById("search_div").style.display = "block" } else { isCheckDiv = false; HiddenDiv(); } } function HiddenDiv() { if (isCheckDiv == false) { document.getElementById("search_div").style.display = "none"; document.getElementById("search_div").innerHTML = ''; } }

5.增加键盘上下键选中提示数据与回车键选中数据到文本框

var index = -1; //表示当前选中的行索引 function keyDown() { var value = event.keyCode //向上38，向下40，回车13 var the_key = event.keyCode //判断提示DIV是否是现实状态 if (document.getElementById("search_div").style.display != "none") { //获取里面所用行 var my_div = document.getElementById("search_div").getElementsByTagName("div") var the_num = my_div.length; switch (the_key) { case 40: //向下 //判断index是否已经到最下面 if (index == the_num - 1) { index = 0; } else { index++; } //清楚所有选中 for (var i = 0; i < the_num; i++) { selectOut(my_div[i]); } //根据index选中对应索引行 for (i = 0; i < the_num; i++) { if (i == index) { selectOver(my_div[i]) } } break; case 38: //向上 //判断index是否已经到最上面 if (index == 0) { index = the_num-1; } else { index--; } //清楚所有选中 for (var i = 0; i < the_num; i++) { selectOut(my_div[i]); } //根据index选中对应索引行 for (i = 0; i < the_num; i++) { if (i == index) { selectOver(my_div[i]) } } break; case 13: //回车 //将选中的内容放入文本框中 if (my_div[index].innerHTML != null) { setSearch(my_div[index].innerHTML); } break; } } } document.onkeydown = keyDown;

3.服务器端的设计

（1）实现一个虚拟的数据源

前台传来关键字，后台必须要有数据匹配，为了简单我就不建立数据库了 我就模拟一个数据源好啦！

步骤：右键项目 --> 添加新项--> 选择一般处理程序命名为：Search.ashx 编写代码如下：

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Data; using System.Data.SqlClient; using System.Text; using System.CodeDom; using System.Globalization; using System.ComponentModel; using System.Collections; public class Search : IHttpHandler { //定义一个数据源 public List<string> DataSource { get { List<string> list = new List<string>() { "我爱C#", "我爱.NET", "我爱微软技术" }; return list; } } public void ProcessRequest (HttpContext context) { context.Response.ContentType = "text/plain"; } public bool IsReusable { get { return false; } } }

（2）搜索数据源返回固定格式数据以字符串形式

紧接着我们要在ProcessReques方法中加入我们搜索数据源构建返回相应数据集，拼接结果字符串返回给客户端。代码如下：

public void ProcessRequest (HttpContext context) { context.Response.ContentType = "text/plain"; //接受客户端关键字并且解码 string searchStr = HttpUtility.UrlDecode(context.Request.QueryString["search"].ToString(), System.Text.Encoding.UTF8); //搜索数据源集合中匹配的关键字 var result = (from string n in DataSource where n.Contains(searchStr) select n).ToList<string>(); StringBuilder sb = new StringBuilder(100); //将匹配关键字用符号^ 分割拼接成字符串 foreach (string str in result as List<string>) { sb.AppendFormat("{0}^", str); } //返回客户端 context.Response.Write(sb.ToString()); }

那么我们的基于AJAX的搜索提示功能就顺利的完成了，运行效果如下：

以上就是ASP.NET利用AJAX实现搜索提示的实现过程，内容很详细，思路也很清晰，希望对大家的学习有所帮助。

您可能感兴趣的文章: