jQuery ajax仿Google自动提示SearchSuggess功能示例
程序员文章站
2023-11-12 18:14:46
本文实例讲述了jquery ajax仿google自动提示searchsuggess功能。分享给大家供大家参考，具体如下：
页面：
<%@ page...
本文实例讲述了jquery ajax仿google自动提示searchsuggess功能。分享给大家供大家参考，具体如下：
页面：
<%@ page language="c#" autoeventwireup="true" codefile="default.aspx.cs" inherits="_default" %> <!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 runat="server"> <title>seach</title> <script type="text/javascript" src="jquery.min.js" ></script> <script type="text/javascript" src="js.js"></script> <link href="css.css" rel="external nofollow" rel="stylesheet" type="text/css" /> </head> <body> <form id="form1" runat="server"> <div onclick="keyup_close();"> <ul> <li class="h_14"> <iframe style="display: none" id="if_keyup" name="if_keyup"></iframe> <input id="kw" name="kw" class="h_15" onkeyup="keyup(event)" autocomplete="off" /> <div style="display: none" id="keyup_d" class="sokeyup" ></div> </li> <li class="h_16"> <input style="cursor: pointer" onclick="so_search();" src="searchbuttom.gif" type="image" /> </li> </ul> </div> </form> </body> </html>
css部分:
ul { padding: 0px; list-style-type: none; margin: 0px; list-style-image: none; height: 52px; }
li { padding-bottom: 0px; list-style-type: none; margin: 0px; padding-left: 0px; padding-right: 0px; list-style-image: none; padding-top: 0px}
.h_14 { background-image: url(text_search.jpg); text-align: left; padding-bottom: 1px; line-height: 26px; margin-top: 3px; padding-left: 4px; width: 245px; background-repeat: no-repeat; background-position: center 50%; float: left; height: 26px; margin-left: 3px; vertical-align: middle; overflow: hidden; margin-right: 3px; padding-top: 2px}
.h_15 { border-bottom: 0px; border-left: 0px; padding-bottom: 0px; line-height: 20px; padding-left: 0px; width: 240px; padding-right: 0px; display: block; float: left; height: 20px; margin-left: 0px; font-size: 14px; vertical-align: middle; border-top: 0px; border-right: 0px; padding-top: 4px}
.h_16 { width: 57px; float: left; height: 32px; overflow: hidden; cursor: pointer}
.sokeyup { z-index: 10000; border-bottom: #000000 1px solid; position: absolute; border-left: #000000 1px solid; width: 245px; display: none; clear: both; overflow: hidden; border-top: #000000 1px solid; border-right: #000000 1px solid}
.sokeyup_1 { line-height: 20px; padding-left: 4px; width: 237px; padding-right: 4px; height: 20px; clear: both; overflow: hidden}
.sokeyup_2 { line-height: 20px; width: 140px; float: left; height: 20px; color: #4c4c4c}
.sokeyup_3 { text-align: right; line-height: 20px; width: 97px; float: right; height: 20px; color: #008000}
.sokeyup_4 { line-height: 20px; width: 237px; height: 20px
}
.sokeyup_5 { line-height: 20px; float: right; height: 20px; color: #0000cc; cursor: pointer; text-decoration: underline}
js部分:
function so_search(){
var kw = $("#kw").val();
var kid = 0;
var kname=$("#select_kid").html();
kw = encodeuri(kw);
if(kw == ''){
alert("请输入要查找的关键词");
}else{
location.href="search-" rel="external nofollow" rel="external nofollow" +kw+".html";
}
}
//关闭搜索提示
function keyup_close(){
$("#keyup_d").hide();
}
//
function keyup_over(id){
$("#u_"+id).css("background-color","#0000cc");
$("#l_"+id).css("color","#fff");
}
function keyup_out(id){
$("#u_"+id).css("background-color","#fff");
$("#l_"+id).css("color","#000");
}
function keyup_click(id){
$("#keyup_d").hide();
var kw=$("#l_"+id).html();
kw = encodeuri(kw);
location.href="search-" rel="external nofollow" rel="external nofollow" +kw+".html";
}
function keyup(event){
if(window.event){
var key =window.event.keycode;
}else{
var key =event.which;
}
if(key!=38&&key!=40&&key!=13){
var kw=$("#kw").val();
//跨域获取搜索提示
var url ="jsonhandler.ashx?kw=" + encodeuri(kw) + "&time=" + new date().tostring();//中文
$.get(url,function(data){
if (data!='') {
$("#keyup_d").html(data+'<ul class="sokeyup_4"><li id="l_0" style="display:none;"></li><li class="sokeyup_5" onclick="keyup_close()">关闭</li></ul>');
$("#keyup_d").show();
} else {
$("#keyup_d").hide();
}
}
);
}
}
var ul_id=0;
$(window).keydown(function(event){
if(window.event){
var key =window.event.keycode;
}else{
var key =event.which;
}
if (key==13) {
if (searchfocus == true) {
}
}
var ulcount=$("#keyup_d ul").size()-1;
if($("#keyup_d").css("display")=="block"){
//向上
$("#l_0").html($("#kw").val());
if(key==13) {
if ($("#kw").val()!= "") {
so_search();
}
}
if (key==38) {
ul_id--;
if(ul_id<0){
ul_id = ulcount;
keyup_over(ul_id);
}else{
keyup_out(ul_id+1);
keyup_over(ul_id);
}
$("#kw").val($("#l_"+ul_id).html());
return false;
}
//向下
if (key==40 ) {
$("#l_0").html($("#kw").val());
ul_id++;
if(ul_id>ulcount){
ul_id=0;
keyup_out(ulcount);
}else{
keyup_out(ul_id-1);
keyup_over(ul_id);
}
$("#kw").val($("#l_"+ul_id).html());
return false;
}
}
});
ashx部分:
<%@ webhandler language="c#" class="jsonhandler" %>
using system;
using system.web;
using system.data.sqlclient;
using system.data;
public class jsonhandler : ihttphandler {
public void processrequest(httpcontext context)
{
context.response.contenttype = "text/plain";
string key = context.request["kw"];
if (key !=null&&key!="")
{
sqlconnection con = new sqlconnection("server=juqi;database=northwind;uid=sa;pwd=sa;");
con.open();
string str = "select distinct keyword,num from search where keyword like @kw order by keyword";
sqlcommand com = new sqlcommand(str, con);
com.parameters.add("@kw", sqldbtype.nvarchar).value = "%"+ key + "%";
sqldatareader sdr = com.executereader();
string htmlstr = "";
int i = 1;
while (sdr.read())
{
string kword = sdr["keyword"].tostring();
string a = sdr["num"].tostring();
htmlstr += "<ul class='sokeyup_1' onmouseover='keyup_over(" + i + ")' onmouseout='keyup_out(" + i + ")' onclick='keyup_click(" + i + ")' id='u_" + i + "'>";
htmlstr += "<li class='sokeyup_2' id='l_" + i + "'>" + kword + "</li>";
htmlstr += "<li class='sokeyup_3'>" + a + " 结果</li></ul>";
i++;
}
context.response.write(htmlstr);
context.response.end();
sdr.close();
con.close();
}
}
public bool isreusable {
get {
return false;
}
}
}
sql部分:
alter procedure [dbo].[suggest_search] @kw varchar(100) ,@cityid int as begin select top 10 * from dbo.searchindex where cityid=@cityid and keyword like '' + @kw + '%' union all select top 10 * from dbo.searchindex where cityid= @cityid and pinyin like '' + @kw + '%' order by searchtimes desc end
--一定要建组合索引……
var result = list.orderbydescending(t => t.searchtimes).select(t => t.keyword.replace("'", "")).take(10);
string json = jsonconvert.serializeobject(result, formatting.indented);
string renderjson = "kissy.suggest.callback({'result':" + json.replace("\"", "\'") + "})";
更多关于jquery相关内容感兴趣的读者可查看本站专题：《jquery中ajax用法总结》、《jquery扩展技巧总结》、《jquery常用插件及用法总结》、《jquery常见经典特效汇总》及《jquery选择器用法总结》
希望本文所述对大家jquery程序设计有所帮助。