Home > Developer > JavaScript
First look at the entire:
Figure 1:
Figure 2:
Figure 3:
Figure 4:
Let's look at the source code.
Page:
Copy codeThe Code is as follows:
<% @ 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 ('the keyword you will search for is: '+ vl );
}
/* Load data */
Function getData (val ){
Var arrData = new Array ();
If (val! = ""){
$. Ajax ({
Type: "post ",
Async: false, // control Synchronization
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 = "Enter the encoding" enableviewstate = "false"/>
<Br/>
<Input id = "Text1" type = "text" style = "display: none;"/>
</Div>
</Form>
</Body>
</Html>
CSS:
Copy codeThe Code is 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 codeThe Code is as follows:
1 // <reference path = "jquery-1.5.1.js"/>
2
3 (function ($ ){
4 var itemIndex = 0;
5
6 $. fn. autoSearchText = function (options ){
7 // the attributes and default values of the plug-in are as follows:
8 var deafult = {
9 width: 200, // text box width
ItemHeight: 150, // The height of the drop-down list.
MinChar: 1, // minimum number of characters (search from the nth number)
Datafn: null, // load data Function
Fn: null // The callback function triggered after the item is selected
};
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); // set the item width
$ ('# AutoSearchItem'). height (ops. itemHeight); // set the item height.
$ (This). focus (function (){
If ($ (this). val () = textDefault ){
$ (This). val ('');
Watermark (this).css ('color', 'black ');
}
});
Var itemCount = $ ('lil'). length; // number of items
/* When you press the key, the drop-down box is displayed, and 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 ();
Detail ('{autosearchitem'}.css ({'visibility ': 'visable', 'left': position. left, 'top': position. top + 24 });
Var data = ops. datafn ($ (this). val ());
InitItem ($ (this), data );
Var itemCount = $ ('lil'). length;
Switch (e. keyCode ){
Case 38: // top
If (itemIndex> 1 ){
ItemIndex --;
}
$ ('Li: nth-child ('+ itemIndex + 'your 'background .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 + 'your 'background .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 ());
Certificate ('{autosearchitem'{.css ('visibility ', 'hiddy ');
Ops. fn ($ (this). val ());
}
Break;
Default:
Break;
}
}
});
/* Click the blank area to hide the drop-down box */
$ (Document). click (function (){
Certificate ('{autosearchitem'{.css ('visibility ', 'hiddy ');
});
};
/* Get the value of the text box */
$. Fn. getValue = function (){
Return $ (this). val ();
};
/* Initialize the data in the drop-down box. When the mouse moves over each item, the background color is changed and the value of the item is assigned to the input box */
Function initItem (obj, data ){
Var str = "";
If (data. length = 0 ){
$ ('# AutoSearchItem ul'{.html (' <div style = "text-align: center; color: red;"> no matching data <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 );
}
/* Assign a value to the search text box when you click an item */
$ ('Lil'). each (function (){
$ (This). bind ('click', function (){
Obj. val ($ (this). find ('font'). text ());
Certificate ('{autosearchitem'{.css ('visibility ', 'hiddy ');
});
});
/* Change the background color when you hover the mouse over each item */
$ ('Lil'). each (function (){
$ (This). hover (
Function (){
$ ('Li: nth-child ('+ itemIndex + 'your 'background .css ({'background': 'white', 'color': 'black '});
ItemIndex = $ ('lil'). index ($ (this) [0]) + 1;
Watermark (this).css ({'background': 'blue', 'color': 'white '});
Obj. val ($ ('li: nth-child ('+ itemIndex +'). find ('font'). text ());
},
Function (){
Watermark (this).css ({'background ': 'white', 'color': 'black '});
}
);
});
};
}) (JQuery );
Getdata. ashx
Copy codeThe Code is as follows:
Using System;
Using System. Collections. Generic;
Using System. Linq;
Using System. Web;
Using System. Web. Services;
Namespace table
{
/// <Summary>
/// $ Codebehindclassname $ abstract description
/// </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;
}
}
}
}
Download Demo
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
