代码思路上实现了功能，只要将处理程序连接数据库就可以完成所有功能。代码如下：
html：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <mce:style type="text/css"><!-- input { border:solid 1px blue; } #_div_content_ ul { margin-left:5px; padding:2px; } #_div_content_ li { list-style-type:none; font-size:12px; } .Mou<a href="https://www.jb51.cc/tag/SEO/" title="SEO">SEO</a>verLi { background-color:Gray; } <style type="text/css" > input { border:solid 1px blue; } #_div_content_ ul { margin-left:5px; padding:2px; } #_div_content_ li { list-style-type:none; font-size:12px; } </style> <mce:script type="text/javascript" src="scripts/jquery-1.3.2.js" mce_src="scripts/jquery-1.3.2.js"></mce:script> <mce:script type="text/javascript"><!-- $(function() { $("#txt_Input").keyup(function() { if ($("#txt_Input").val() == "") { $("#_div_content_").hide(); } else { var offset = $("#txt_Input").offset(); $("#_div_content_").css({ top: offset.top + $("#txt_Input").height() + 5 + "px",left: offset.left + "px" }); GetJSONData(); $("#_div_content_").show(); } }); }); GetJSONData = function() { $.ajax({ type:"POST",url:"handler/handler.ashx",data:"k="+$("#txt_Input").val(),dataType:"json",beforeSend:BeforeSendData,success:GetDataSuccess }); } BeforeSendData = function() { $("#_div_content_").html("loading……"); } GetDataSuccess = function(data) { var s = "<ul>"; for (k = 0; k < data.length; k++) { s += "<li title='" + data[k].title + "' ondblclick=SelectThis(this) onmou<a href="https://www.jb51.cc/tag/SEO/" title="SEO">SEO</a>ver=Mou<a href="https://www.jb51.cc/tag/SEO/" title="SEO">SEO</a>verClass(this) onmou<a href="https://www.jb51.cc/tag/SEO/" title="SEO">SEO</a>ut=Mou<a href="https://www.jb51.cc/tag/SEO/" title="SEO">SEO</a>utClass(this)>"; s += data[k].title + " " + data[k].count; s += "</li>" } s += "</ul>"; $("#_div_content_").html(s.toString()); } SelectThis = function(obj) { $("#txt_Input").val($(obj).attr("title")); } Mou<a href="https://www.jb51.cc/tag/SEO/" title="SEO">SEO</a>verClass = function(obj) { $(obj).addClass("Mou<a href="https://www.jb51.cc/tag/SEO/" title="SEO">SEO</a>verLi"); } Mou<a href="https://www.jb51.cc/tag/SEO/" title="SEO">SEO</a>utClass = function(obj) { $(obj).removeClass("Mou<a href="https://www.jb51.cc/tag/SEO/" title="SEO">SEO</a>verLi"); } // --></mce:script> </head> <body> <input id="txt_Input" name="txt_Input" /> <div id="_div_content_" style="display:none;border-width:1px;border-color:Red; border-style:solid;position:absolute;z-index:1000;width:250px"> </div> </body> </html>
Handler.ashx文件如下：
<%@ WebHandler Language="C#" Class="Handler" %> using System; using System.Web; public class Handler : IHttpHandler { public void ProcessRequest (HttpContext context) { context.Response.ContentType = "text/plain"; if (context.Request["k"] == null || context.Request["k"].ToString() == "") context.Response.Write("-1"); else { string k = context.Request["k"]; string jsonStr = GetJSONByKey(k); context.Response.Write(jsonStr); } } public bool IsReusable { get { return false; } } private string GetJSONByKey(string key) { return str2; } private string str2 = "[{/"title/":/"<a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a>/",/"count/":/"1000/"},{/"title/":/"调试/",/"count/":/"900/"},{/"title/":/"编辑/",/"count/":/"800/"},{/"title/":/"视图/",/"count/":/"700/"},{/"title/":/"网站/",/"count/":/"600/"},{/"title/":/"<a href="https://www.jb51.cc/tag/shengcheng/" target="_blank" class="keywords">生成</a>/",/"count/":/"500/"}]"; }
总结：
1、仿照Google或者百度的提示功能；
2、实现了双击每行数据选中功能；
本程序提供实现思路，没有对外观做太多美化，具体到实际的内容并没有进一步实现，其实都是一些劳力劳动。
