仿百度的输入提示功能

/// <reference path="jquery-1.7.1.min.js" />

//实现搜索输入框的输入提示js类

function oSearchSuggest(searchFuc) {

var input = $(‘#txtNaviSearchBox‘);

var suggestWrap = $(‘#gov_search_suggest‘);

var key = "";

var init = function () {

input.bind(‘keyup‘, sendKeyWord);

input.bind(‘blur‘, function () { setTimeout(hideSuggest, 100); })

}

var hideSuggest = function () {

suggestWrap.hide();

}

//发送请求,根据关键字到后台查询

var sendKeyWord = function (event) {

//键盘选择下拉项

if (suggestWrap.css(‘display‘) == ‘block‘ && event.keyCode == 38 || event.keyCode == 40) {

var current = suggestWrap.find(‘li.bdsug-s‘);

if (event.keyCode == 38) {

if (current.length > 0) {

var prevLi = current.removeClass(‘bdsug-s‘).prev();

if (prevLi.length > 0) {

prevLi.addClass(‘bdsug-s‘);

input.val(prevLi.html());

}

} else {

var last = suggestWrap.find(‘li:last‘);

last.addClass(‘bdsug-s‘);

input.val(last.html());

}

} else if (event.keyCode == 40) {

if (current.length > 0) {

var nextLi = current.removeClass(‘bdsug-s‘).next();

if (nextLi.length > 0) {

nextLi.addClass(‘bdsug-s‘);

input.val(nextLi.html());

}

} else {

var first = suggestWrap.find(‘li:first‘);

first.addClass(‘bdsug-s‘);

input.val(first.html());

}

}

//输入字符

} else {

var valText = $.trim(input.val());

if (valText == ‘‘ || valText == key) {

return;

}

searchFuc(valText);

key = valText;

}

}

//请求返回后,执行数据展示

this.dataDisplay = function (data) {

if (data.length <= 0) {

suggestWrap.hide();

return;

}

//往搜索框下拉建议显示栏中添加条目并显示

var li;

var tmpFrag = document.createDocumentFragment();

suggestWrap.find(‘ul‘).html(‘‘);

for (var i = 0; i < data.length; i++) {

li = document.createElement(‘LI‘);

li.innerHTML = data[i];

tmpFrag.appendChild(li);

}

suggestWrap.find(‘ul‘).append(tmpFrag);

suggestWrap.show();

//为下拉选项绑定鼠标事件

suggestWrap.find(‘li‘).hover(function () {

suggestWrap.find(‘li‘).removeClass(‘bdsug-s‘);

$(this).addClass(‘bdsug-s‘);

input.val(this.innerHTML);

}, function () {

$(this).removeClass(‘bdsug-s‘);

})

// .bind(‘hover‘, function () {

// alert(3);

// input.val(this.innerHTML);

// suggestWrap.hide();

// });

}

init();

};

//实例化输入提示的JS,参数为进行查询操作时要调用的函数名

var searchSuggest = new oSearchSuggest(sendKeyWordToBack);

//这是一个模似函数,实现向后台发送ajax查询请求,并返回一个查询结果数据,传递给前台的JS,再由前台JS来展示数据。本函数由程序员进行修改实现查询的请求

//参数为一个字符串,是搜索输入框中当前的内容

function sendKeyWordToBack(keyword) {

/**/var obj = {

"keyword": keyword

};

$.ajax({

type: "POST",

url: "/Navi/NaviPrompt.aspx?NaviKey=" + obj.keyword + "",

// url: "Default4.aspx",

async: false,

// data: obj,

dataType: "json",

error: function (x, y, z) { alert(y) },

success: function (data) {

var aData = [];

$(data).each(function () {

aData.push(this.Title);

})

//将返回的数据传递给实现搜索输入框的输入提示js类

searchSuggest.dataDisplay(aData);

}

});

// //以下为根据输入返回搜索结果的模拟效果代码,实际数据由后台返回

// var aData = [];

// aData.push(keyword + ‘返回数据1‘);

// aData.push(keyword + ‘返回数据2‘);

// aData.push(keyword + ‘不是有的人天生吃素的‘);

// aData.push(keyword + ‘不是有的人天生吃素的‘);

// aData.push(keyword + ‘2012是真的‘);

// aData.push(keyword + ‘2012是假的‘);

// alert(9);

// //将返回的数据传递给实现搜索输入框的输入提示js类

// searchSuggest.dataDisplay(aData);

}

复制代码中转页面代码:protected void Page_Load(object sender, EventArgs e)

{

if (null != Request.QueryString["NaviKey"] && "" != Request.QueryString["NaviKey"])

{

Prompt(Request.QueryString["NaviKey"]);

}

}

/// <summary>

/// 搜索提示

/// </summary>

protected void Prompt(string key)

{

NV_NaviContentBLL ncbll = new NV_NaviContentBLL();

DataSet ds = ncbll.GetPrompt(string.Format("Title like ‘%{0}%‘ order by RewardAmount desc", key));

if (ds.Tables[0].Rows.Count > 0)

{

Response.Write(ncbll.ToJson(ds.Tables[0]));

Response.End();

}

}

时间: 2024-10-11 13:26:33

仿百度的输入提示功能的相关文章

JS实现仿百度输入框自动匹配功能的示例代码

JS实现仿百度输入框自动匹配功能的示例代码 作者: 字体:[增加 减小] 类型:转载 本篇文章主要是对JS实现仿百度输入框自动匹配功能的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 现在很多网站都有这种效果,在文本框输入一个字符,下边会出来相匹配的内容,这个代码就演示了这个功能是如何完成的,当然,这是个静态的,你可以将提示的内容从数据库读取出来,要用到AJAX那东东. 复制代码 代码如下: <HTML><HEAD><title>带输入匹配的文本框&l

JQUERY仿百度谷歌智能提示

  若使用jquery智能提示,则主要使用Ajax动态调用后台. 仿百度谷歌智能提示,说实话,本篇博客仿的不太缜密,有待继续完善. 仿百度谷歌智能提示,思路主要如下: 1.后台根据前台传递的参数进行匹配,提供数据列表. 2.前台美观智能展示选择数据列表 声明:此篇博客的后台是假数据,没有搭建数据库进行匹配. 来一张目前功能截图: 鼠标控制: 键盘控制: 选中之后: 思路:[重点前台] 监听输入框值变化,然后动态生成显示列表[仿] 显示列表中绑定各种事件(鼠标移近.移除.单击[仿] 文本框聚焦

Jquery 仿百度搜索引擎自动完成功能

源代码如下所示: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>自动完成例子</title> <script type="text/javascript" src="js/jquery-1.4.1.min.js"><

站长工具|百度搜索框提示功能

百度向站长开放免费“百度搜索框”代码和“百度搜索框提示”代码.只需进行简单的设置, 即可将“ 百度搜索框( 带提示功能)”功能快速加入到您的网页中.提升用户在网站中的搜索体验. 根据不同类型的网站需求,站长工具一共提供三种引入方式供您选择: 简单方式——方便的将“百度搜索框(带提示功能)”直接加入到您的网页中.将以下代码加入到您的网页中,即可获得带有“搜索框提示”功能的百度搜索框 HTML代码: <form action=”http://www.baidu.com/baidu” target=”

基于jQuery仿百度首页换肤功能代码

分享一款基于jQuery仿百度首页换肤功能代码.这是一款类似百度首页的自定义背景图片切换特效代码. 在线预览   源码下载 实现的代码. html代码: <a href="#">换肤</a> <div class="heitiao"></div> <div class="con"><img src="images/content.png" /></d

【转】仿百度输入框智能提示的js代码

转自:http://www.jb51.net/article/40783.htm 对于我这个JS菜鸟,能找到这样的实属不容易啊!!! 刚开始老大让做这个功能,真是一点头绪都没有,万分感谢!!! 最近客户需求老是变更,不过有些是因为客户催得急,我没有那么快能完成,所以先做了一个雏形给他们,后来再慢慢改.比如雏形那里我做了一个下拉列表 给他们,事实上他们的数据有200多条,用个下拉列表的话很不现实,你能找那么多?而且那个下拉列表该有多长啊?所以很自然的,我想到了百度那个智能提示 的功能. 参考了一下

easyui的combobox根据后台数据实现自动输入提示功能

adauhuehkek最近做项目的时候遇到一个需求,需要在录入数据的时候检索已经存在的数据记录,并从中提取相似的数据进行展示并选择,以提高录入效率,简单的说,这个功能有点像在谷歌.百度搜索框里输入一个关键字,然后自动在下边列举出与关键字相似的信息供选择.好啦,现在功能说完了,下边就直入正题,把两种方法都列出来,以供需要的人去选择使用,其实两种方法的区别之处很小,主要是在返回检索结果时调用方法不一样,一种是map(),另一种是each(),这两个方法的区别我就不说了,简单总结就是map()要从建数

浏览器地址栏输入提示功能

要求当用户在浏览器的地址栏输入地址时,浏览器能够根据用户输入的历史记录对用户现在的输入进行匹配,提示用户可能要输入的字符.大概意思就是要实现和现在浏览器差不多的效果,比如用户之前输入过aaa,abcd,abcc(简化以下,不考虑前缀"www."和后缀".com"),当用户再次在浏览器地址栏输入a时,系统能够提示aaa,aaaa,abcd,abcc.输入ab时,系统能够提示abcd,abcc. 思路:感觉可以用树的结构解决该问题,解决过程如下: 1.数据结构选择 用户

类百度,输入联想功能实现

1.定义一个文本框: <input type="text" class="txtW95" id="produ" /><div id="searchresult" style="display: none;position:absolute;top:22px;left:0;width: 250px;z-index:9999;overflow: hidden;background: #E0E0E0;&q