html5里百度搜索框怎么做,基于jquery的仿百度搜索框效果代码

先看看整个的效果图：

图一：

图二：

图三：

图四：

大概的效果图就这样，接下来直接看源码

页面：

$(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;

}

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 ///

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 = '

$(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('

无符合数据

');

}

else {

for (var i = 1; i <= data.length; i++) {

str += "

" + i + "/" + data.length + "\r " + data[i - 1] + "";

}

$('#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

{

///

/// $codebehindclassname$ 的摘要说明

///

[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下载