Use jquery to implement a Drop-down box that can enter search text _jquery

First look at the effect


function:Click the Drop-down box input box, automatically display the following drop-down list, and is based on the input box input search added, automatically in the background to find, and then uploaded to the front desk, show the page.
Use of JS:

Copy Code code as follows:

var $xialaSELECT;
$ (document). Ready (function () {
Initxialaselect ();
Initsearch ();
});
var temptimeout=null;
var query= "";
function Searchdev (key) {
if (key = = "") return;
Query=key;
Cleartimeout (temptimeout);
temptimeout= settimeout (findunsaved, 500);
}
function findunsaved ()
{
Alert ("DD");
if (1==1) return;
$.ajax ({
Type: "Post",
data:{' query ': query},
Url:path + "/tlist.action",
Success:function (data) {
Xiala (data);
},
Error:function (data) {
Alert ("Load failed, please try again!") ");
}
});
}
function Initsearch ()
{
Define a Drop-down button layer and configure the style (position, anchor coordinates, size, background picture, Z axis), appended to the text box
$xialaDIV = $ (' <div></div> '). CSS (' position ', ' absolute '). CSS (' left ', $ (' #province '). Position ()-Left + $ ( ' #province '). Width ()-+ ' px '. css (' top ',
$ (' #province '). Position (). Top + 4 + ' px '). CSS (' background ', ' Transparent URL (...) /images/lala.gif) no-repeat top left '). css (' height ', ' 16px '). CSS (' width ',
' 15px '). CSS (' z-index ', ' 100 ');
$ (' #province '). After ($xialaDIV);
Mouse into the background map to modify the position
$xialaDIV. MouseOver (function () {
$xialaDIV. CSS (' background-position ', ' 0% -16px ');
});
Mouse move out modify background map position
$xialaDIV. Mouseout (function () {
$xialaDIV. CSS (' background-position ', ' 0% -0px ');
});
Mouse Click to modify the background map position
$xialaDIV. MouseDown (function () {
$xialaDIV. CSS (' background-position ', ' 0% -32px ');
});
Mouse release modify background map position
$xialaDIV. MouseUp (function () {
$xialaDIV. CSS (' background-position ', ' 0% -16px ');
if ($xialaSELECT)
$xialaSELECT. Show ();
});
$ (' #province '). MouseUp (function () {
$xialaDIV. CSS (' background-position ', ' 0% -16px ');
$xialaSELECT. Show ();
});
}
var Firsttimeyes=1;
Drop-down box div for text box
function Xiala (data) {
The
if ($xialaSELECT)
{
$xialaSELECT. empty ();
}
Define a drop down frame layer and configure the style (position, anchor coordinates, width, z axis) to hide it first
Define five option layers, and configure the style (width, z axis must be higher than the dropdown), add the name, Value property, join the dropdown frame layer
$xialaSELECT. Append (data);
if (Firsttimeyes = 1)
{
Firsttimeyes =firsttimeyes+1;
}else{
$xialaSELECT. Show ();
}
}
function Initxialaselect ()
{
$xialaSELECT = $ (' <div></div> '). CSS (' position ', ' absolute '). CSS (' overflow-y ', ' scroll '). CSS (' Overflow-x ', ' hidden '). CSS (' border ', ' 1px solid #809DB9 '). CSS (' border-top ', ' None '). css (' left ', ' 125px '). css
(' Top ', $ (' #province '). Position (). Top + $ (' #province '). Height () + 6 + ' px '). CSS (' width ', $ (' #province '). Width () + ' px '). CSS (' Z-index ', ', '). CSS (' width ', ' 152px '). CSS (' background ', ' #fff '). CSS (' height ', ' 200px '). CSS (' max-height ', ' 600px ');
$ (' #province '). After ($xialaSELECT);
Option-layer mouse move out style
$xialaSELECT. MouseOver (function (event) {
if ($ (event.target). attr (' name ') = = ' option ') {
The background color becomes darker and the word color becomes white when moved
$ (event.target). CSS (' Background-color ', ' #000077 '). CSS (' Color ', ' white ');
$ (event.target). Mouseout (function () {
Move out is the background color white, the word color black
$ (event.target). CSS (' Background-color ', ' #FFFFFF '). CSS (' color ', ' #000000 ');
});
}
});
Judging the popup display by clicking the position
$xialaSELECT. MouseUp (function (event) {
If it is a Drop-down button layer or a Drop-down frame layer, the Drop-down frame layer is still displayed
if (Event.target = = $xialaSELECT. Get (0) | | | | event.target = = $xialaDIV. Get (0)) {
$xialaSELECT. Show ();
}
else {
If it is an option layer, the value of the text box is changed
if ($ (event.target). attr (' name ') = = ' option ') {
Pop-up value observation
$ (' #nce '). Val ($ (event.target). html ());
$ (' #d '). Val ($ (event.target). attr ("D"));
If seleced host then hidden the dev type
if ($ (event.target). attr ("ass") = = 3305)
{
$ ("#ype"). Hide ();
$ ("#ost"). Val (1);
}else{
$ ("#ype"). Show ();
$ ("#ost"). Val (-1);
}
}
If it is a different location, the Drop-down frame layer
if ($xialaSELECT. CSS (' display ') = = ' block ') {
$xialaSELECT. Hide ();
}
}
});
$xialaSELECT. Hide ();
}
var k = 1;
Document.onclick = clicks;
function clicks ()
{
if (k ==2) {
K = 1;
if ($xialaSELECT)
{
if ($xialaSELECT. CSS (' display ') = = ' block ') {
$xialaSELECT. Hide ();
}
}
}else{
K = 2;
}
}

Copy Code code as follows:

. CBA {
width:150px;
height:18px;
}
. selectlala {
Text-align:left;
line-height:20px;
padding-left:5px;
Width:147px;
Font-family:arial,verdana,tahoma;
height:20px;
}
<input type= "text" name= "province" id= "province" class= "CBA" onkeyup= "Searchdev (this.value)"/>