编程 Javascript

基于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下载

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

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