Initiate an AJAX request for input text and form a pull-down menu for selection, providing PHP version samples
Html
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/> <style>/* Input Box pull-down menu */. Input{width:130px;height:25px;padding-left:10px;cursor:pointer;
text-align:left;border:1px solid #afccee; line-height:25px;overflow:hidden;} . Now{background-color: #0099ff; color: #fff;} #list_item {position:absolute;display:none;background: #fff; border:1px
Solid #0080ff; Width:200px;max-height:400px;overflow-y: auto;z-index:999999;overflow-x: Hidden;} #list_item li {border-bottom:1px dashed #ccc; cursor:pointer;padding:5px;z-index:999999;font-size:12px;
list-style-type:none;margin-left:-25px;} </style> <body> <input type= "text" id= "select_name" class= "input" name= "Select_name" onkeyup= "Show_ List (this), Select_data (This) "/><p> <input type=" text "id=" Select_haha "class=" input "name=" Select_haha " Onkeyup= "Show_list (This), Select_data (This)"/><p> <input type= "text" id= "Select_hahaha" class= "input" Name= "Select_haha" onkeyup= "Show_list" (this); sElect_data (This) "/><p> <ul id=" List_item "></ul> </body> <script src= ' Jquery-1.10.2.min.js ' ></script> <script> var list={//Need to modify this is the configuration item, on two parameters need to change, ul_id: You know it is the UL element ID,
We will load the search result li,ajax_url: The URL of the asynchronous request data, and the one-dimensional array returns the data in Jason format ' ul_id ': ' List_item ', ' ajax_url ': ' data.php '
};
$ (document). Click (function () {$ ("#" +list_ul_id). CSS (' Display ', ' none ');}
* * Input box Drop-down form for Select User/function Show_list (obj) {var x=$ (obj). Position (). Left;
var y=$ (obj). Position (). Top;
y=y+28;
document.getElementById (list.ul_id). style.left=x+ ' px ';
document.getElementById (list.ul_id). style.top=y+ ' px ';
$ ("#" +list.ul_id). CSS (' Display ', ' block ');
* * * Drop-down mouse to select data and save to input box/function Chose_data (Name,objid) {$ (' # ' +objid). Val (name);
$ ("#" +list.ul_id). CSS (' Display ', ' none ');
function Select_data (obj) {var data=$ (obj). val ();
$.post (List.ajax_url,{data:data,r:math.random (), is_ajax:1},function (data) {$ (' # ' +list.ul_id). html ('); var mYstr= ';
if (data== ' NoData ') {mystr= ' <li onmousemove= ' now ');
Exit (Json_encode ($data)); ?>
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
