Baidu search box imitation effect code based on jquery_jquery

Let’s take a look at the entire rendering:
Picture 1:

Picture 2:

Picture 3:

Picture 4:

The approximate rendering is like this. Next, look directly at the source code
page:

Copy the code The code is as follows:

< ;/body>

CSS:

Copy code Code As follows:

.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:

Copy code The code is as follows:

1 ///
2
3 (function($) {
4 var itemIndex = 0;
5
6 $.fn.autoSearchText = function(options) {
7 //The following are the properties of the plug-in and their default values
8 var deafult = {
9 width: 200 , //Text box width
itemHeight: 150, //Drop-down box height
minChar: 1, //Minimum number of characters (from which number to start searching)
datafn: null, //Load data function
fn: null //Callback function triggered after selecting an item
};
var textDefault = $(this).val();
var ops = $.extend(deafult, options);
$(this).width(ops.width);
var autoSearchItem = '

div>';
$(this).after(autoSearchItem);
$('#autoSearchItem').width(ops.width 2); //Set the item width
$('#autoSearchItem' ).height(ops.itemHeight); //Set item height
$(this).focus(function() {
if ($(this).val() == textDefault) {
$ (this).val('');
$(this).css('color', 'black');
}
});
var itemCount = $('li' ).length; //Number of items
/*When the mouse button is pressed, the drop-down box is displayed, and when the item is crossed, the background color is changed and assigned to the input box*/
$(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 : //Up
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: //Next
if (itemIndex 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 $(this).val($('li:nth-child(' itemIndex ')').find('font').text());
$('#autoSearchItem').css('visibility ', 'hidden');
ops.fn($(this).val());
}
break;
default:
break;
}
}
});
/*Click on the blank space to hide the drop-down box*/
$(document).click(function() {
$('#autoSearchItem').css('visibility' , 'hidden');
});
};
/*Get the value of the text box*/
$.fn.getValue = function() {
return $(this) .val();
};
/*Initialize the drop-down box data. When the mouse moves over each item, change the background color and assign the value of the item to the input box*/
function initItem(obj, data ) {
var str = "";
if (data.length == 0) {
$('#autoSearchItem ul').html('

No matching data

');
}
else {
for (var i = 1; i str = "

" i "/" data.length "r" data[i - 1] "

";
}
$('#autoSearchItem ul').html(str);
}
/*Assign the value to the search text box when the item is clicked*/
$('li' ).each(function() {
$(this).bind('click', function() {
obj.val($(this).find('font').text());
$('#autoSearchItem').css('visibility', 'hidden');
});
});
/*Change the background color when the mouse moves over each item*/
$('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

Copy code The code is as follows:

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