先看看整個(gè)的效果圖：

圖一：

圖二：

圖三：

圖四：

大概的效果圖就這樣，接下來(lái)直接看源碼

頁(yè)面：

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 //以下為該插件的屬性及其默認(rèn)值

8 var deafult = {

9 width: 200, //文本框?qū)?/p>

itemHeight: 150, // 下拉框高

minChar: 1, //最小字符數(shù)(從第幾個(gè)開(kāi)始搜索)

datafn: null, //加載數(shù)據(jù)函數(shù)

fn: null //選擇項(xiàng)后觸發(fā)的回調(diào)函數(shù)

};

var textDefault = $(this).val();

var ops = $.extend(deafult, options);

$(this).width(ops.width);

var autoSearchItem = '

';

$(this).after(autoSearchItem);

$('#autoSearchItem').width(ops.width + 2); //設(shè)置項(xiàng)寬

$('#autoSearchItem').height(ops.itemHeight); //設(shè)置項(xiàng)高

$(this).focus(function() {

if ($(this).val() == textDefault) {

$(this).val('');

$(this).css('color', 'black');

}

});

var itemCount = $('li').length; //項(xiàng)個(gè)數(shù)

/*鼠標(biāo)按下鍵時(shí)，顯示下拉框，并且劃過(guò)項(xiàng)時(shí)改變背景色及賦值給輸入框*/

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

}

}

});

/*點(diǎn)擊空白處隱藏下拉框*/

$(document).click(function() {

$('#autoSearchItem').css('visibility', 'hidden');

});

};

/*獲取文本框的值*/

$.fn.getValue = function() {

return $(this).val();

};

/*初始化下拉框數(shù)據(jù),鼠標(biāo)移過(guò)每項(xiàng)時(shí)，改變背景色并且將項(xiàng)的值賦值給輸入框*/

function initItem(obj, data) {

var str = "";

if (data.length == 0) {

$('#autoSearchItem ul').html('

無(wú)符合數(shù)據(jù)

');

}

else {

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

str += "

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

}

$('#autoSearchItem ul').html(str);

}

/*點(diǎn)擊項(xiàng)時(shí)將值賦值給搜索文本框*/

$('li').each(function() {

$(this).bind('click', function() {

obj.val($(this).find('font').text());

$('#autoSearchItem').css('visibility', 'hidden');

});

});

/*鼠標(biāo)劃過(guò)每項(xiàng)時(shí)改變背景色*/

$('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$ 的摘要說(shuō)明

///

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

相關(guān)標(biāo)簽：百度搜索框

本文原創(chuàng)發(fā)布php中文網(wǎng)，轉(zhuǎn)載請(qǐng)注明出處，感謝您的尊重！

相關(guān)文章

相關(guān)視頻

網(wǎng)友評(píng)論

文明上網(wǎng)理性發(fā)言，請(qǐng)遵守 新聞評(píng)論服務(wù)協(xié)議我要評(píng)論

立即提交

專(zhuān)題推薦獨(dú)孤九賤-php全棧開(kāi)發(fā)教程

全棧 100W+

主講：Peter-Zhu 輕松幽默、簡(jiǎn)短易學(xué)，非常適合PHP學(xué)習(xí)入門(mén)

玉女心經(jīng)-web前端開(kāi)發(fā)教程

入門(mén) 50W+

主講：滅絕師太 由淺入深、明快簡(jiǎn)潔，非常適合前端學(xué)習(xí)入門(mén)

天龍八部-實(shí)戰(zhàn)開(kāi)發(fā)教程

實(shí)戰(zhàn) 80W+

主講：西門(mén)大官人 思路清晰、嚴(yán)謹(jǐn)規(guī)范，適合有一定web編程基礎(chǔ)學(xué)習(xí)

總結(jié)

以上是生活随笔為你收集整理的php百度搜索框代码,基于jquery的仿百度搜索框效果代码_jquery的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。