jQuery ajax仿Google自動提示SearchSuggess功能示例
更新時間：2019年03月28日 10:19:15 作者：曾祥展
這篇文章主要介紹了jQuery ajax仿Google自動提示SearchSuggess功能,結(jié)合實例形式較為詳細的分析了jQuery結(jié)合ajax與.net后臺調(diào)用sql數(shù)據(jù)庫實現(xiàn)搜索自動提示相關(guān)操作技巧,需要的朋友可以參考下
本文實例講述了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("請輸入要查找的關(guān)鍵詞");
}else{
location.href="search-" rel="external nofollow" rel="external nofollow" +kw+".html";
}
}
//關(guān)閉搜索提示
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()">關(guān)閉</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 + " 結(jié)果</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("\"", "\'") + "})";
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jquery中Ajax用法總結(jié)》、《jQuery擴展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
您可能感興趣的文章:
- jQuery實現(xiàn)動態(tài)添加和刪除input框代碼實例
- JQueryDOM之樣式操作
- 淺談JS和jQuery的區(qū)別
- jQuery實現(xiàn)動態(tài)添加和刪除input框?qū)嵗a
- jQuery添加新內(nèi)容的四個常用方法分析【append，prepend，after，before】
- 簡單易擴展可控性強的Jquery轉(zhuǎn)盤抽獎程序
- 詳解jQuery-each()方法
- 使用jquery的cookie實現(xiàn)登錄頁記住用戶名和密碼的方法
- Jquery的autocomplete插件用法及參數(shù)講解
- jQuery事件blur()方法的使用實例講解
相關(guān)文章
JQuery中關(guān)于jquery.js與jquery.min.js的比較探討
jquery-1.4.2.min.js是優(yōu)化的，而query-1.4.2.js是易于開發(fā)著閱讀的，具體詳解祥看本文，希望對你有所幫助2013-05-05
這篇文章給大家總結(jié)了jQuery UI實現(xiàn)動畫效果的實例代碼，有需要的朋友們可以參考測試下。2018-08-08
實用jQuery分頁特效插件jquery.pagination.js，基于jQuery實現(xiàn)，本文給大家分享jquery分頁插件之jquery pagination，需要的朋友可以參考下2015-08-08
jQuery插件StickUp實現(xiàn)網(wǎng)頁導(dǎo)航置頂
本文給大家介紹的是一款jQuery插件--StickUp，他的主要用途是實現(xiàn)網(wǎng)頁元素固定，如導(dǎo)航固定讓其總是保持在視圖中可見，效果非常不錯，這里推薦給小伙伴們。2015-04-04
jquery的ajax從純真網(wǎng)(cz88.net)獲取IP地址對應(yīng)地區(qū)名
使用jquery的ajax，輕松從純真網(wǎng)(cz88.net)獲取IP地址對應(yīng)地區(qū)名2009-12-12
這篇文章主要介紹了基于ajax及jQurey實現(xiàn)局部刷新過程解析,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-06-06
相信大家對twitter類的微博客都不陌生,作為一句話博客其字數(shù)即時提示效果設(shè)計的非常人性化.2010-04-04
下面小編就為大家分享一篇jquery中done和then的區(qū)別(詳解)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
本篇文章是對jQuery中的ajax技術(shù)進行了詳細的分析介紹，需要的朋友參考下2013-06-06
用JQuery 判斷某個屬性是否存在hasAttr的解決方法
本篇文章介紹了，用JQuery 判斷某個屬性是否存在hasAttr的解決方法。需要的朋友參考下2013-04-04