基于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 相关文章推荐
捕获关闭窗口的脚本
Jan 10 Javascript
精通Javascript系列之数据类型 字符串
Jun 08 Javascript
JS 操作符整理[推荐收藏]
Nov 15 Javascript
JS 对输入框进行限制(常用的都有)
Jul 30 Javascript
jquery 实现窗口的最大化不论什么情况
Sep 03 Javascript
使用js dom和jquery分别实现简单增删改
Sep 11 Javascript
jQuery实现页面点击后退弹出提示框的方法
Aug 24 Javascript
js实现每日签到功能
Nov 29 Javascript
Node.js 路由的实现方法
Jun 05 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
Jun 18 Javascript
Vue路由模块化配置的完整步骤
Aug 14 Javascript
Vue组件间数据传递的方式(3种)
Jul 13 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大批量数据操作时临时调整内存与执行时间的方法
2011/04/20 PHP
PHP与javascript实现变量交互的示例代码
2013/07/23 PHP
教你如何解密 “ PHP 神盾解密工具 ”
2014/06/20 PHP
php使用Jpgraph绘制复杂X-Y坐标图的方法
2015/06/10 PHP
PHP aes (ecb)解密后乱码问题
2015/06/22 PHP
CodeIgniter针对数据库的连接、配置及使用方法
2016/03/03 PHP
php求斐波那契数的两种实现方式【递归与递推】
2019/09/09 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
editable.js 基于jquery的表格的编辑插件
2011/10/24 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
2012/01/13 Javascript
jQuery(非HTML5)可编辑表格实现代码
2012/12/11 Javascript
window.showModalDialog()返回值的学习心得总结
2014/01/07 Javascript
JavaScript中的分号插入机制详细介绍
2015/02/11 Javascript
js实现同一个页面多个渐变效果的方法
2015/04/10 Javascript
Vue.js路由组件vue-router使用方法详解
2016/12/02 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
2017/02/22 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
2017/05/08 jQuery
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
2018/01/16 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
2020/04/26 Javascript
vue实现整屏滚动切换
2020/06/29 Javascript
[02:20]DOTA2亚洲邀请赛 IG战队出场宣传片
2015/02/07 DOTA
[01:10:24]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第一场 2月28日
2021/03/11 DOTA
关于python的bottle框架跨域请求报错问题的处理方法
2017/03/19 Python
浅谈Python中重载isinstance继承关系的问题
2018/05/04 Python
python绘制热力图heatmap
2020/03/23 Python
python将list转为matrix的方法
2018/12/12 Python
python全栈知识点总结
2019/07/01 Python
CSS3实现内凹圆角的实例代码
2017/05/04 HTML / CSS
入党积极分子学习两会心得体会范文
2014/03/17 职场文书
服务承诺书范文
2014/05/19 职场文书
清明节演讲稿
2014/05/27 职场文书
音乐节策划方案
2014/06/09 职场文书
党的群众路线教育实践活动个人对照检查材料(企业)
2014/11/05 职场文书
2019已经过半,你知道年中工作总结该怎么写吗?
2019/07/03 职场文书
Python3 如何开启自带http服务
2021/05/18 Python
Python OpenCV实现图像模板匹配详解
2022/04/07 Python