基于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 相关文章推荐
Node.js中的缓冲与流模块详细介绍
Feb 11 Javascript
JavaScript中原型和原型链详解
Feb 11 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
Aug 07 Javascript
Javascript获取统一管理的提示语(message)
Feb 03 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
May 17 Javascript
vue组件父子间通信之综合练习(聊天室)
Nov 07 Javascript
koa上传excel文件并解析的实现方法
Aug 09 Javascript
小程序实现列表点赞功能
Nov 02 Javascript
vue与原生app的对接交互的方法(混合开发)
Nov 28 Javascript
发布Angular应用至生产环境的方法
Dec 10 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
Oct 09 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
基于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
用 PHP5 轻松解析 XML
2006/12/04 PHP
file_get_contents(&quot;php://input&quot;, &quot;r&quot;)实例介绍
2013/07/01 PHP
对xmlHttp对象的理解
2011/01/17 Javascript
javascript自定义函数参数传递为字符串格式
2014/07/29 Javascript
Javascript之BOM(window对象)详解
2016/05/25 Javascript
原生 JS Ajax,GET和POST 请求实例代码
2016/06/08 Javascript
Javascript 跨域知识详细介绍
2016/10/30 Javascript
简单的渐变轮播插件
2017/01/12 Javascript
原生js更改css样式的两种方式
2017/03/15 Javascript
vue实现app页面切换动画效果实例
2017/05/23 Javascript
angularjs+bootstrap实现自定义分页的实例代码
2017/06/19 Javascript
node.js自动上传ftp的脚本分享
2018/06/16 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
2018/09/26 Javascript
详解JavaScript栈内存与堆内存
2019/04/04 Javascript
JavaScript文档加载模式以及元素获取
2020/07/28 Javascript
vue中提示$index is not defined错误的解决方式
2020/09/02 Javascript
Python实现把utf-8格式的文件转换成gbk格式的文件
2015/01/22 Python
Python File readlines() 使用方法
2018/03/19 Python
matplotlib 输出保存指定尺寸的图片方法
2018/05/24 Python
关于Python解包知识点总结
2020/05/05 Python
一款利用纯css3实现的win8加载动画的实例分析
2014/12/11 HTML / CSS
基于CSS3 animation动画属性实现轮播图效果
2017/09/12 HTML / CSS
HTML5 新标签全部总汇(推荐)
2016/06/13 HTML / CSS
Under Armour澳大利亚官网:美国知名的高端功能性运动品牌
2018/02/22 全球购物
温泉秘密:Onsen Secret
2020/07/06 全球购物
亚洲领先的设计购物网站:Pinkoi
2020/11/26 全球购物
工程造价管理专业大专生求职信
2013/10/06 职场文书
优秀的自荐信要注意哪些
2014/01/03 职场文书
记帐员岗位责任制
2014/02/08 职场文书
文案策划求职信
2014/04/14 职场文书
群众路线查摆问题整改措施
2014/10/10 职场文书
离婚协议书范本(通用篇)
2014/11/30 职场文书
2014年优秀班主任工作总结
2014/12/16 职场文书
校园运动会广播稿
2015/08/19 职场文书
国产动画《万圣街》日语配音版制作决定!
2022/03/20 国漫
全网非常详细的pytest配置文件
2022/07/15 Python