目的：類似于百度的搜索聯(lián)動，輸入前面的幾個字，查詢出可能的結(jié)果供用戶選擇，如下：

html部分：在“中”這個輸入框下面隱藏一個ul屬性，例如:

<ul class="am-padding-left-0 uhide" id="site_list" style="position:absolute;left:0;top:2.2em;width:100%;z-index:20;overflow-y:auto;max-height:15em;background-color:#eee;"></ul>

js部分：

$('#middle_name').bind('input propertychange', function() { $('#site_list').removeClass("uhide") //去掉隱藏var middle_name = $(this).val(); //獲取當(dāng)前輸入的值if(middle_name==''){ //如果沒有輸入，清空下拉框var str='';$('#site_list').html(str);}appcan.ajax({url : apiUrl + 'getMiddle', //進行異步查詢type : "GET",data : {middle_name:middle_name },datatype : "json",timeout : 30000,success : function(data, status, requestCode, response, xhr) {//appcan.window.closeToast();data = JSON.parse(data);if(data.code=='001'){var str='';middleList = data.data;for(var i in middleList){ //把結(jié)果循環(huán)成htmlstr+='<li style="padding-left:0.5em;border:solid #dedede 1px;border-top:none;font-size:1em;background-color:#c0c0c0;line-height:3em;" οnclick="search_select(this,\'middle_name\','+middleList[i].mtel+')">'+middleList[i].middle_name+'</li>'; //onclick代表用戶點擊列出的建議，使用下面的search_select函數(shù)寫入 } $('#site_list').html(str); }else{ var str=''; $('#site_list').html(str); } }, error : function(xhr, erroType, error, msg) { appcan.window.openToast("獲取數(shù)據(jù)失敗", 2000, 5, 0); } }); });

function search_select(obj,id,tel){
$('#'+id).val($(obj).html())
$('#site_list').addClass("uhide")
$("#mtel").val(tel) }

?

后臺部分 php:

//自動獲取中介輸入自動查找public function getMiddle(){$Middle = M('Middle');if($_GET['middle_name']){$where['middle_name'] = array('like','%'.$_GET['middle_name'].'%');$middleList = $Middle->where($where)->order('middle_sort desc')->select();if($middleList){$result['code']='001';$result['data']=$middleList;}else{$result['code']='004';}echo json_encode($result); //jsonp請求exit;}}

?

轉(zhuǎn)載于:https://www.cnblogs.com/tingfengqieyu/p/5148518.html

總結(jié)

以上是生活随笔為你收集整理的输入框联动查询的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。