基于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 相关文章推荐
JavaScript常用脚本汇总(一)
Mar 04 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
Jan 10 Javascript
浅谈js函数三种定义方式 &amp; 四种调用方式 &amp; 调用顺序
Feb 19 Javascript
jQuery事件与动画基础详解
Feb 23 Javascript
js实现图片推拉门效果代码实例
May 18 Javascript
微信小程序+云开发实现欢迎登录注册
May 24 Javascript
vue.js路由mode配置之去掉url上默认的#方法
Nov 01 Javascript
ES6学习笔记之let与const用法实例分析
Jan 22 Javascript
全面解析JavaScript Module模式
Jul 24 Javascript
vue设置默认首页的操作
Aug 12 Javascript
仿照Element-ui实现一个简易的$message方法
Sep 14 Javascript
vue element-ui中table合计指定列求和实例
Nov 02 Javascript
基于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+AJAX实现无刷新注册(带用户名实时检测)
2007/01/02 PHP
php中防止SQL注入的最佳解决方法
2013/04/25 PHP
thinkphp使用literal防止模板标签被解析的方法
2014/11/22 PHP
jQuery live( type, fn ) 委派事件实现
2009/10/11 Javascript
js下拉框二级关联菜单效果代码具体实现
2013/08/03 Javascript
JQuery处理json与ajax返回JSON实例代码
2014/01/03 Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
2016/02/17 Javascript
JavaScrpt判断一个数是否是质数的实例代码
2017/06/11 Javascript
Vue组件的使用教程详解
2018/01/05 Javascript
简化vuex的状态管理方案的方法
2018/06/02 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
2018/11/05 Javascript
用Cordova打包Vue项目的方法步骤
2019/02/02 Javascript
原生js实现抽奖小游戏
2019/06/27 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
2019/09/03 Javascript
JS手写一个自定义Promise操作示例
2020/03/16 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
2020/07/14 jQuery
在vue中使用eslint,配合vscode的操作
2020/11/09 Javascript
javascript实现倒计时提示框
2021/03/02 Javascript
Python实现二叉搜索树
2016/02/03 Python
TensorFlow深度学习之卷积神经网络CNN
2018/03/09 Python
python模拟表单提交登录图书馆
2018/04/27 Python
Python实现读取SQLServer数据并插入到MongoDB数据库的方法示例
2018/06/09 Python
Python实用工具FuckIt.py介绍
2019/07/02 Python
浅谈tensorflow中Dataset图片的批量读取及维度的操作详解
2020/01/20 Python
Django跨域资源共享问题(推荐)
2020/03/09 Python
python中关于数据类型的学习笔记
2020/07/19 Python
英国最好的温室之家:Greenhouses Direct
2019/07/13 全球购物
会展策划与管理专业大学生职业生涯规划
2014/02/07 职场文书
2014年小学生教师节演讲稿范文
2014/09/10 职场文书
2015年宣传工作总结
2015/04/08 职场文书
2015年电话销售工作总结范文
2015/04/20 职场文书
学习雷锋精神倡议书
2015/04/27 职场文书
小学工作总结2015
2015/05/04 职场文书
入党积极分子党支部意见
2015/06/02 职场文书
php远程请求CURL案例(爬虫、保存登录状态)
2021/04/01 PHP
Python Pandas读取Excel日期数据的异常处理方法
2022/02/28 Python