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 相关文章推荐
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
20个最常见的jQuery面试问题及答案
May 23 jQuery
jquery实现搜索框功能实例详解
Jul 23 jQuery
jquery插件开发模式实例详解
Jul 20 jQuery
jquery 时间戳转日期过程详解
Oct 12 jQuery
使用jQuery实现掷骰子游戏
Oct 24 jQuery
Jquery ajax书写方法代码实例解析
Jun 12 jQuery
jQuery实现异步上传一个或多个文件
Aug 17 jQuery
jquery插件实现轮播图效果
Oct 19 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合并数组+与array_merge的区别分析
2010/08/01 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
PHP ElasticSearch做搜索实例讲解
2020/02/05 PHP
js获取客户端外网ip的简单实例
2013/11/21 Javascript
JS数组的赋值介绍
2014/03/10 Javascript
javascript内置对象操作详解
2015/02/04 Javascript
easyui validatebox验证
2016/04/29 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
2016/12/06 Javascript
详解Angualr 组件间通信
2017/01/21 Javascript
vue.js中mint-ui框架的使用方法
2017/05/12 Javascript
jQuery滑动到底部加载下一页数据的实例代码
2017/05/22 jQuery
Vue实现typeahead组件功能(非常靠谱)
2017/08/26 Javascript
js正则表达式校验指定字符串的方法
2018/07/23 Javascript
ndm:NPM的桌面GUI应用程序
2018/10/15 Javascript
基于JS实现web端录音与播放功能
2019/04/17 Javascript
简单了解JavaScript弹窗实现代码
2020/05/07 Javascript
python标准日志模块logging的使用方法
2013/11/01 Python
PyCharm在win10的64位系统安装实例
2017/11/26 Python
使用Python写一个小游戏
2018/04/02 Python
通过python的matplotlib包将Tensorflow数据进行可视化的方法
2019/01/09 Python
python隐藏终端执行cmd命令的方法
2019/06/24 Python
python设计微型小说网站(基于Django+Bootstrap框架)
2019/07/08 Python
python单向循环链表原理与实现方法示例
2019/12/03 Python
Python3 字典dictionary入门基础附实例
2020/02/10 Python
python实现交并比IOU教程
2020/04/16 Python
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
2013/01/07 HTML / CSS
香蕉共和国Banana Republic官网:美国GAP旗下偏贵族风格服饰品牌
2016/11/21 全球购物
以色列的身体护理及家居香薰品牌:Sabon NYC
2018/02/23 全球购物
党的群众路线教育实践活动动员会主持词
2014/03/20 职场文书
庆祝新中国成立65周年“向国旗敬礼”网上签名寄语
2014/09/27 职场文书
教师对照四风自我剖析材料
2014/09/30 职场文书
党员四风自我剖析材料
2014/10/07 职场文书
毕业设计致谢语
2015/05/14 职场文书
Python机器学习之KNN近邻算法
2021/05/14 Python
Python内置数据结构列表与元组示例详解
2021/08/04 Python
Spark SQL 2.4.8 操作 Dataframe的两种方式
2021/10/16 SQL Server