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

先看看整个的效果图：
图一：

基于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;

	}

	}

	}

	}