Home >Web Front-end >JS Tutorial >Baidu search box imitation effect code based on jquery_jquery

Baidu search box imitation effect code based on jquery_jquery

WBOYOriginal: 2016-05-16 18:07:591041browse

Let’s take a look at the entire rendering:
Picture 1: Baidu search box imitation effect code based on jquery_jquery

Picture 2: Baidu search box imitation effect code based on jquery_jquery

Picture 3: Baidu search box imitation effect code based on jquery_jquery

Picture 4: Baidu search box imitation effect code based on jquery_jquery

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

Copy the code The code is as follows:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="autoSearch._Default" %>

<%} %>

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

';
$(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 < 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;
}
}
});
/*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 <= data.length; 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下载

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JavaScript study notes (5) Regular expressions_basic knowledgeNext article：JavaScript study notes (5) Regular expressions_basic knowledge

See more

Baidu search box imitation effect code based on jquery_jquery

Related articles