Baidu class, input Lenovo function realization

1. Define a text box:

<input type= "text" class= "txtW95" id= "Produ"/>
<div id= "SearchResult" style= "display:none;position:absolute;top:22px;left:0;width:250px;
Z-index:9999;overflow:hidden;background: #E0E0E0; " Border-top:none;> </div>

2. Set a display area below the text box. The style is set to not show by default, the position is absolute, the Z-index setting is larger in the front

3. Populating the data

$ (function () {$ ("#produ"). KeyUp (function (evt) {var k = window.event? evt.keyCode:evt.whic                H if ($ ("#produ"). val ()! = "" && k!!!!!!                    Produ "). Val ();                        Callbizapi ("Autocomplish", {//Call Ajax Name:name}, function (result) {//Get Data                        var names = new Array (); if (result.length! = 0) {var layer = "";//define a layer (this layer is a table) layer = "                            <table id= ' AA ' > '; $.each (result, function (IDX, item) {layer + = "<tr class= ' line ' ><td class= ' std ' &G t; "+ Item.                            ProductName + "</td></tr>";//Add Data to the table});                            Layer + = "</table>";         $ ("#searchresult"). empty ();//Empty The last result first                   $ ("#searchresult"). Append (layer);//Add this layer $ (". Line:first"). AddClass ("hover");                            $ ("#searchresult"). CSS ("Display", "");                                $ (". Line"). Hover (function () {$ (". Line"). Removeclass ("hover");                            $ (this). addclass ("hover");                            }, Function () {$ (this). Removeclass ("hover");                            });                                $ (". Line"). Click (function () {///To Process $ ("#produ") after the row is selected. Val ($ (this). text ());                            $ ("#searchresult"). CSS ("display", "none");                        });                            } else {$ ("#searchresult"). empty ();                        $ ("#searchresult"). CSS ("display", "none");              }})} else if (k = = 38) {//Up ARROW      $ (' #aa tr.hover '). Prev (). addclass ("hover");                    $ (' #aa tr.hover '). Next (). Removeclass ("hover");                $ (' #produ '). Val ($ (' #aa tr.hover '). text ());                    } else if (k = = 40) {//down arrow $ (' #aa tr.hover '). Next (). addclass ("hover");                    $ (' #aa tr.hover '). Prev (). Removeclass ("hover");                $ (' #produ '). Val ($ (' #aa tr.hover '). text ());                    } else if (k = = 13) {//Enter $ (' #produ '). Val ($ (' #aa tr.hover '). text ());                    $ ("#searchresult"). empty ();                $ ("#searchresult"). CSS ("display", "none");                    } else {$ ("#searchresult"). empty ();                $ ("#searchresult"). CSS ("display", "none");            }            });                $ ("#searchresult"). Bind ("MouseLeave", function () {$ ("#searchresult"). empty ();            $ ("#searchresult"). CSS ("display", "none");    });    }) 

The CSS to use

. Line        {            font-size:12px;            Background: #E0E0E0;            width:130px;            padding:2px;        }        . Hover        {            background: #007ab8;            width:130px;            Color: #fff;        }        . Std        {            width:150px;        }        . cc{        position:relative;        }

　　

Baidu class, input Lenovo function realization