Let's take a look at the whole picture:
Figure I:
Figure II:
Figure III:
Figure IV:
The approximate effect picture is like this, next direct view source
Page:
Copy Code code 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 ">
<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 (' You are going to search for keywords: ' +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>
<body>
<form id= "Form1" runat= "Server" >
<div>
<input id= "Autosearchtext" type= "text" value= "Please enter encoding" enableviewstate= "false"/>
<br/>
<input id= "Text1" type= "text" style= "Display:none;" />
</div>
</form>
</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 code 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 following are the properties of the plug-in and their default values
8 var deafult = {
9 width:200,//text box width
itemheight:150,//dropdown box High
Minchar:1,//min. number of characters (search starting from the first few)
Datafn:null,//Loading data functions
callback function triggered after fn:null//selection
};
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 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 presses the key, the Display Drop-down box, and when the item is changed background color 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://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 to hide the dropdown box * *
$ (document). Click (function () {
$ (' #autoSearchItem '). CSS (' visibility ', ' hidden ');
});
};
/* Get the value of the text box * *
$.fn.getvalue = function () {
return $ (this). Val ();
};
/* Initializes the Drop-down box data, changes the background color and assigns the value of the item to the input box when the mouse moves through each item.
function Inititem (obj, data) {
var str = "";
if (Data.length = = 0) {
$ (' #autoSearchItem ul '). html (' <div style= ' text-align:center;color:red; " > No compliance 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);
}
* To assign values to the search text box when clicking on the item * *
$ (' Li '). each (function () {
$ (this). bind (' click ', function () {
Obj.val ($ (this). Find (' font '). text ());
$ (' #autoSearchItem '). CSS (' visibility ', ' hidden ');
});
});
/* mouse across each item to change the background color * *
$ (' 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 code as follows:
Using System;
Using System.Collections.Generic;
Using System.Linq;
Using System.Web;
Using System.Web.Services;
Namespace table
{
<summary>
Summary description of $codebehindclassname $
</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 "": "" "," "Code" ":" "1374223"},
{"id": "One", "" Code "": "" 1374233 "},
{"id" ":" "", "" Code "": "" 1374243 "},
{"" id "": "", "" Code "": "" 1374253 "},
{"id" ":" "", "" Code "": "" 1374263 "},
{"" id "": "", "" Code "": "" 1374273 "},
{"" id "": "" "," "Code" ":" "1374283"},
{"id" ":" "", "" Code "": "" 1374293 "},
{"id" ":" "", "" Code "": "" 1374313 "},
{"" id "": "", "" Code "": "" 1374323 "},
{"" id "": "", "" Code "": "" 1374333 "},
{"" id "": "" "," "Code" ":" "1374343"},
{"id" ":" "," "Code" ":" "1374353"},
{"id" ":" "", "" Code "": "" 1374363 "},
{"" id "": "" "," "Code" ":" "1374373"},
{"" id "": "", "" Code "": "" 1374383 "},
{"" id "": "" "," "Code" ":" "1374393"},
{"" id "": "" "", "" Code "": "" 1374403 "},
{"id" ":" "," "Code" ":" "1374413"},
{"id" ":" "", "" Code "": "" 1374423 "},
{"id" ":" "", "" Code "": "" 1374433 "},
{"id" ":" "", "" Code "": "" 1374443 "},
{"id" ":" "", "" Code "": "1374453" "},
{"id" ":" "", "" Code "": "" 1374463 "},
{"id" ":" "", "" Code "": "" 1374473 "},
{"" id "": "" "," "Code" ":" "1374483"},
{"id" ":" "", "" Code "": "" 1374493 ""}] ";
return result;
}
public bool IsReusable
{
Get
{
return false;
}
}
}
}
Demo download
