jQuery ajax仿Google自动提示SearchSuggess功能示例


Posted in jQuery onMarch 28, 2019

本文实例讲述了jQuery ajax仿Google自动提示SearchSuggess功能。分享给大家供大家参考,具体如下:

jQuery ajax仿Google自动提示SearchSuggess功能示例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 相关文章推荐
JQuery实现图片轮播效果
May 08 jQuery
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
基于jquery的on和click的区别详解
Jan 15 jQuery
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 jQuery
jQuery实现聊天对话框
Feb 08 jQuery
jquery实现抽奖功能
Oct 22 jQuery
JQueryDOM之样式操作
Mar 27 #jQuery
浅谈JS和jQuery的区别
Mar 27 #jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 #jQuery
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 #jQuery
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 #jQuery
详解jQuery-each()方法
Mar 13 #jQuery
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 #jQuery
You might like
PHP安装问题
2006/10/09 PHP
php实现监听事件
2013/11/06 PHP
phpmyadmin出现Cannot start session without errors问题解决方法
2014/08/14 PHP
PHP将session信息存储到数据库的类实例
2015/03/04 PHP
php限制上传文件类型并保存上传文件的方法
2015/03/13 PHP
谈谈你对Zend SAPIs(Zend SAPI Internals)的理解
2015/11/10 PHP
yii2中使用Active Record模式的方法
2016/01/09 PHP
Yii2主题(Theme)用法详解
2016/07/23 PHP
php中static和const关键字用法分析
2016/12/07 PHP
JavaScript 学习笔记(四)
2009/12/31 Javascript
extjs grid设置某列背景颜色和字体颜色的实现方法
2010/09/06 Javascript
详谈jQuery中的this和$(this)
2014/11/13 Javascript
JS实现页面超时后自动跳转到登陆页面
2015/01/19 Javascript
基于jQuery的Web上传插件Uploadify使用示例
2016/05/19 Javascript
归纳下js面向对象的几种常见写法总结
2016/08/24 Javascript
JavaScript实现星星等级评价功能
2017/03/22 Javascript
Vue filters过滤器的使用方法
2017/07/14 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
2019/07/10 Javascript
vue-cli3使用mock数据的方法分析
2020/03/16 Javascript
Python时间的精准正则匹配方法分析
2017/08/17 Python
python中的print()输出
2019/04/12 Python
pyqt5移动鼠标显示坐标的方法
2019/06/21 Python
基于pytorch的保存和加载模型参数的方法
2019/08/17 Python
python使用正则来处理各种匹配问题
2019/12/22 Python
利用Python计算KS的实例详解
2020/03/03 Python
Pytorch实现将模型的所有参数的梯度清0
2020/06/24 Python
瑞士设计师家具和家居饰品网上商店:Bruno Wickart
2019/03/18 全球购物
甲方资料员岗位职责
2013/12/13 职场文书
学徒工职责
2014/03/06 职场文书
公安个人四风问题对照检查及整改措施
2014/10/28 职场文书
2015年中秋晚会主持稿
2015/07/30 职场文书
《藏戏》教学反思
2016/02/23 职场文书
2016年党员公开承诺书范文
2016/03/24 职场文书
承诺书的签字人,需不需要承担相应的责任?
2019/07/09 职场文书
vue使用v-model进行跨组件绑定的基本实现方法
2021/04/28 Vue.js
全网非常详细的pytest配置文件
2022/07/15 Python