將input的輸入文本發起ajax請求,並形成下拉式功能表以供選擇,提供php版範例
HTML
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style>/*輸入框下拉式功能表*/.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={ //需要修改 這是配置項,就兩個參數需要改改,ul_id:你懂它是ul元素的id,我們將在它裡面載入搜尋結果的li,ajax_url:非同步請求資料的url,一維數組返回jason格式資料即可 'ul_id':'list_item', 'ajax_url':'data.php' };$(document).click(function(){ $("#"+list_ul_id).css('display','none');})/* * 輸入框下拉形式,供選擇使用者*/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');}/* * 下拉滑鼠選擇資料並儲存到輸入框*/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='this.className='now'' );exit(json_encode($data));?>