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 相关文章推荐
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
jQuery实现一个简单的验证码功能
Jun 26 jQuery
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
基于jquery实现多选下拉列表
Aug 02 jQuery
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
jquery获取input输入框中的值
Nov 13 jQuery
基于jQuery实现可编辑的表格
Dec 11 jQuery
jQuery实现颜色打字机的完整代码
Mar 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小偷相关截取函数备忘
2010/11/28 PHP
php类的定义与继承用法实例
2015/07/07 PHP
PHP 在数组中搜索给定的简单实例 array_search 函数
2016/06/13 PHP
使用PHP连接多种数据库的实现代码(mysql,access,sqlserver,Oracle)
2016/12/21 PHP
基于jquery的合并table相同单元格的插件(精简版)
2011/04/05 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
2014/06/16 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
2014/07/31 Javascript
JavaScript 浏览器对象模型BOM使用介绍
2015/04/13 Javascript
javascript实现textarea中tab键的缩排处理方法
2015/06/26 Javascript
js canvas实现QQ拨打电话特效
2017/05/10 Javascript
详解Angular4中路由Router类的跳转navigate
2017/06/09 Javascript
使用vue + less 实现简单换肤功能的示例
2018/02/21 Javascript
Vue.js实现表格渲染的方法
2018/09/07 Javascript
微信小程序之onLaunch与onload异步问题详解
2019/03/28 Javascript
vue cli使用融云实现聊天功能的实例代码
2019/04/19 Javascript
Layui点击图片弹框预览的实现方法
2019/09/16 Javascript
js实现AI五子棋人机大战
2020/05/28 Javascript
40行代码把Vue3的响应式集成进React做状态管理
2020/05/20 Javascript
Python中for循环详解
2014/01/17 Python
Python 查找字符在字符串中的位置实例
2018/05/02 Python
Python Pillow Image Invert
2019/01/22 Python
Python脚本修改阿里云的访问控制列表的方法
2019/03/08 Python
Falsk 与 Django 过滤器的使用与区别详解
2019/06/04 Python
python实现自动打卡的示例代码
2020/10/10 Python
CSS3实现苹果手机解锁的字体闪亮效果示例
2021/01/05 HTML / CSS
利用简洁的图片预加载组件提升html5移动页面的用户体验
2016/03/11 HTML / CSS
基于 HTML5 Canvas实现 的交互式地铁线路图
2018/03/05 HTML / CSS
Loreto Gallo英国:欧洲领先的在线药房
2021/01/21 全球购物
说出ArrayList,Vector, LinkedList的存储性能和特性
2015/01/04 面试题
酒店门卫岗位职责
2013/12/29 职场文书
工商治理实习生的自我评价
2014/01/15 职场文书
因个人原因离职的辞职信范文
2015/05/12 职场文书
吴仁宝观后感
2015/06/09 职场文书
《爬天都峰》教学反思
2016/02/23 职场文书
Python绘制分类图的方法
2021/04/20 Python
OpenCV-Python实现人脸磨皮算法
2021/06/07 Python