基于jquery的仿百度搜索框效果代码


Posted in Javascript onApril 11, 2011

先看看整个的效果图:
图一:基于jquery的仿百度搜索框效果代码

图二:基于jquery的仿百度搜索框效果代码

图三:基于jquery的仿百度搜索框效果代码

图四:基于jquery的仿百度搜索框效果代码

大概的效果图就这样,接下来直接看源码
页面:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="autoSearch._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></title> 
<link href="autoSearchText.css" type="text/css" rel="Stylesheet" /> 
<script src="jquery-1.5.1.min.js" type="text/javascript"></script> 
<%if (false){ %> 
<script type="text/javascript" src="jquery-1.5.1.js"></script> 
<%} %> 
<script src="jquery.autoSearchText.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
$('#autoSearchText').autoSearchText({ width: 300, itemHeight: 150,minChar:1, datafn: getData, fn: alertMsg }); 
}); 
function alertMsg(vl){ 
alert('你将要搜索的关键字是: '+vl); 
} 
/*加载数据*/ 
function getData(val) { 
var arrData = new Array(); 
if (val != "") { 
$.ajax({ 
type: "post", 
async: false, //控制同步 
url: "getData.ashx", 
data: "param=" + val, 
dataType: "json", 
cache: false, 
success: function(data) { 
for (var i = 0; i < data.length; i++) { 
if (val == data[i].Code.substring(0, val.length)) 
arrData.push(data[i].Code); 
} 
}, 
Error: function(err) { 
alert(err); 
} 
}); 
} 
return arrData; 
} 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
<input id="autoSearchText" type="text" value="请输入编码" enableviewstate="false"/> 
<br /> 
<input id="Text1" type="text" style=" display:none;"/> 
</div> 
</form> 
</body> 
</html>

CSS:
.autoSearchText{ 
border:solid 1px #CFCFCF; 
height:20px; 
color:Gray; 
} 
.menu_v{ 
margin:0; 
padding:0; 
line-height:20px; 
font-size:12px; 
list-style-type:none; 
} 
.menu_v li{ 
margin:0; 
padding:0; 
line-height:20px; 
font-size:14px; 
list-style-type:none; 
float:none; 
} 
.menu_v li span{ 
color:Red; 
} 
#autoSearchItem{ 
border:solid 1px #CFCFCF; 
visibility:hidden; 
position:absolute; 
background-color:white; 
overflow-y:auto; 
}

JS:
1 ///<reference path="jquery-1.5.1.js" /> 
2 
3 (function($) { 
4 var itemIndex = 0; 
5 
6 $.fn.autoSearchText = function(options) { 
7 //以下为该插件的属性及其默认值 
8 var deafult = { 
9 width: 200, //文本框宽 
itemHeight: 150, // 下拉框高 
minChar: 1, //最小字符数(从第几个开始搜索) 
datafn: null, //加载数据函数 
fn: null //选择项后触发的回调函数 
}; 
var textDefault = $(this).val(); 
var ops = $.extend(deafult, options); 
$(this).width(ops.width); 
var autoSearchItem = '<div id="autoSearchItem"><ul class="menu_v"></ul></div>'; 
$(this).after(autoSearchItem); 
$('#autoSearchItem').width(ops.width + 2); //设置项宽 
$('#autoSearchItem').height(ops.itemHeight); //设置项高 
$(this).focus(function() { 
if ($(this).val() == textDefault) { 
$(this).val(''); 
$(this).css('color', 'black'); 
} 
}); 
var itemCount = $('li').length; //项个数 
/*鼠标按下键时,显示下拉框,并且划过项时改变背景色及赋值给输入框*/ 
$(this).bind('keyup', function(e) { 
if ($(this).val().length >= ops.minChar) { 
var position = $(this).position(); 
$('#autoSearchItem').css({ 'visibility': 'visible', 'left': position.left, 'top': position.top + 24 }); 
var data = ops.datafn($(this).val()); 
initItem($(this), data); 
var itemCount = $('li').length; 
switch (e.keyCode) { 
case 38: //上 
if (itemIndex > 1) { 
itemIndex--; 
} 
$('li:nth-child(' + itemIndex + ')').css({ 'background': 'blue', 'color': 'white' }); 
$(this).val($('li:nth-child(' + itemIndex + ')').find('font').text()); 
break; 
case 40: //下 
if (itemIndex < itemCount) { 
itemIndex++; 
} 
$('li:nth-child(' + itemIndex + ')').css({ 'background': 'blue', 'color': 'white' }); 
$(this).val($('li:nth-child(' + itemIndex + ')').find('font').text()); 
break; 
case 13: //Enter 
if (itemIndex > 0 && itemIndex <= itemCount) { 
$(this).val($('li:nth-child(' + itemIndex + ')').find('font').text()); 
$('#autoSearchItem').css('visibility', 'hidden'); 
ops.fn($(this).val()); 
} 
break; 
default: 
break; 
} 
} 
}); 
/*点击空白处隐藏下拉框*/ 
$(document).click(function() { 
$('#autoSearchItem').css('visibility', 'hidden'); 
}); 
}; 
/*获取文本框的值*/ 
$.fn.getValue = function() { 
return $(this).val(); 
}; 
/*初始化下拉框数据,鼠标移过每项时,改变背景色并且将项的值赋值给输入框*/ 
function initItem(obj, data) { 
var str = ""; 
if (data.length == 0) { 
$('#autoSearchItem ul').html('<div style="text-align:center;color:red;">无符合数据<div>'); 
} 
else { 
for (var i = 1; i <= data.length; i++) { 
str += "<li><span>" + i + "/" + data.length + "</span>\r<font>" + data[i - 1] + "</font></li>"; 
} 
$('#autoSearchItem ul').html(str); 
} 
/*点击项时将值赋值给搜索文本框*/ 
$('li').each(function() { 
$(this).bind('click', function() { 
obj.val($(this).find('font').text()); 
$('#autoSearchItem').css('visibility', 'hidden'); 
}); 
}); 
/*鼠标划过每项时改变背景色*/ 
$('li').each(function() { 
$(this).hover( 
function() { 
$('li:nth-child(' + itemIndex + ')').css({ 'background': 'white', 'color': 'black' }); 
itemIndex = $('li').index($(this)[0]) + 1; 
$(this).css({ 'background': 'blue', 'color': 'white' }); 
obj.val($('li:nth-child(' + itemIndex + ')').find('font').text()); 
}, 
function() { 
$(this).css({ 'background': 'white', 'color': 'black' }); 
} 
); 
}); 
}; 
})(jQuery);

getdata.ashx
using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.Services; 
namespace table 
{ 
/// <summary> 
/// $codebehindclassname$ 的摘要说明 
/// </summary> 
[WebService(Namespace = "http://tempuri.org/")] 
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] 
public class getData : IHttpHandler 
{ 
public void ProcessRequest(HttpContext context) 
{ 
context.Response.Clear(); 
string value = GetResult(); 
context.Response.Write(value); 
context.Response.End(); 
} 
private string GetResult() 
{ 
string result = string.Empty; 
result = @" 
[{""id"":""1"",""Code"":""1374123""}, 
{""id"":""2"",""Code"":""1374133""}, 
{""id"":""3"",""Code"":""1374143""}, 
{""id"":""4"",""Code"":""1374153""}, 
{""id"":""5"",""Code"":""1374163""}, 
{""id"":""6"",""Code"":""1374173""}, 
{""id"":""7"",""Code"":""1374183""}, 
{""id"":""8"",""Code"":""1374193""}, 
{""id"":""9"",""Code"":""1374213""}, 
{""id"":""10"",""Code"":""1374223""}, 
{""id"":""11"",""Code"":""1374233""}, 
{""id"":""12"",""Code"":""1374243""}, 
{""id"":""13"",""Code"":""1374253""}, 
{""id"":""14"",""Code"":""1374263""}, 
{""id"":""15"",""Code"":""1374273""}, 
{""id"":""16"",""Code"":""1374283""}, 
{""id"":""17"",""Code"":""1374293""}, 
{""id"":""18"",""Code"":""1374313""}, 
{""id"":""19"",""Code"":""1374323""}, 
{""id"":""20"",""Code"":""1374333""}, 
{""id"":""21"",""Code"":""1374343""}, 
{""id"":""22"",""Code"":""1374353""}, 
{""id"":""23"",""Code"":""1374363""}, 
{""id"":""24"",""Code"":""1374373""}, 
{""id"":""25"",""Code"":""1374383""}, 
{""id"":""26"",""Code"":""1374393""}, 
{""id"":""27"",""Code"":""1374403""}, 
{""id"":""28"",""Code"":""1374413""}, 
{""id"":""29"",""Code"":""1374423""}, 
{""id"":""30"",""Code"":""1374433""}, 
{""id"":""31"",""Code"":""1374443""}, 
{""id"":""32"",""Code"":""1374453""}, 
{""id"":""33"",""Code"":""1374463""}, 
{""id"":""34"",""Code"":""1374473""}, 
{""id"":""35"",""Code"":""1374483""}, 
{""id"":""36"",""Code"":""1374493""}]"; 
return result; 
} 
public bool IsReusable 
{ 
get 
{ 
return false; 
} 
} 
} 
}

Demo下载
Javascript 相关文章推荐
百度 popup.js 完美修正版非常的不错 脚本之家推荐
Apr 17 Javascript
JS组件Bootstrap Table使用方法详解
Feb 02 Javascript
Javascript类型系统之undefined和null浅析
Jul 13 Javascript
js enter键激发事件实例代码
Aug 17 Javascript
纯js实现悬浮按钮组件
Dec 17 Javascript
HTML中使背景图片自适应浏览器大小实例详解
Apr 06 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
Jun 25 Javascript
微信小程序自定义导航栏
Dec 31 Javascript
微信小程序前端自定义分享的实现方法
Jun 13 Javascript
vue 实现用户登录方式的切换功能
Apr 14 Javascript
node.js通过url读取文件
Oct 16 Javascript
Vue的生命周期一起来看看
Feb 24 Vue.js
基于jquery的监控数据是否发生改变
Apr 11 #Javascript
jQuery实战之品牌展示列表效果
Apr 10 #Javascript
基于PHP+Jquery制作的可编辑的表格的代码
Apr 10 #Javascript
JQuery优缺点分析说明
Apr 10 #Javascript
基于jquery的15款幻灯片插件
Apr 10 #Javascript
再次分享18个非常棒的jQuery表格插件
Apr 10 #Javascript
javascript学习笔记(七)利用javascript来创建和存储cookie
Apr 08 #Javascript
You might like
php include的妙用,实现路径加密
2008/07/29 PHP
php简单获取目录列表的方法
2015/03/24 PHP
php实现的验证码文件类实例
2015/06/18 PHP
php实现中文转数字
2016/02/18 PHP
PHP终止脚本运行三种实现方法详解
2020/09/01 PHP
jQuery页面图片伴随滚动条逐渐显示的小例子
2013/03/21 Javascript
Node.js实现简单聊天服务器
2014/06/20 Javascript
程序员必知35个jQuery 代码片段
2015/11/05 Javascript
jqGrid 学习笔记整理——进阶篇(一 )
2016/04/17 Javascript
jQuery实现的购物车物品数量加减功能代码
2016/11/16 Javascript
js插件实现图片滑动验证码
2020/09/29 Javascript
PHP自动加载autoload和命名空间的应用小结
2017/12/01 Javascript
js 取消页面可以选中文字的功能方法
2018/01/02 Javascript
element-ui 表格实现单元格可编辑的示例
2018/02/26 Javascript
Vue实现用户自定义字段显示数据的方法
2018/08/28 Javascript
解决vue-cli 打包后自定义动画未执行的问题
2019/11/12 Javascript
vue 组件开发原理与实现方法详解
2019/11/29 Javascript
Javascript执行流程细节原理解析
2020/05/14 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
2020/07/31 Javascript
[36:37]2014 DOTA2华西杯精英邀请赛5 24 VG VS iG
2014/05/25 DOTA
[42:25]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第三场
2018/04/06 DOTA
Pycharm学习教程(6) Pycharm作为Vim编辑器使用
2017/05/03 Python
python正则表达式re之compile函数解析
2017/10/25 Python
python实现音乐下载器
2018/04/15 Python
详解django中Template语言
2020/02/22 Python
Jupyter打开图形界面并画出正弦函数图像实例
2020/04/24 Python
python二维图制作的实例代码
2020/12/03 Python
HelloFresh澳大利亚:订购你的美味食品盒、健康餐食
2018/03/28 全球购物
意大利奢侈品综合电商网站:MODES
2019/12/14 全球购物
办公室保洁员岗位职责
2013/12/02 职场文书
竞聘上岗演讲稿范文
2014/01/10 职场文书
2016年校园植树节广播稿
2015/12/17 职场文书
素质教育培训心得体会
2016/01/19 职场文书
导游词之镜泊湖
2019/12/09 职场文书
nginx网站服务如何配置防盗链(推荐)
2021/03/31 Servers
使用canvas对video视频某一刻截图功能
2021/09/25 HTML / CSS