输入框联动查询

目的：类似于百度的搜索联动，输入前面的几个字，查询出可能的结果供用户选择，如下：

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();    //获取当前输入的值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){  //把结果循环成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函数写入

} $('#site_list').html(str); }else{ var str=''; $('#site_list').html(str); } }, error : function(xhr, erroType, error, msg) { appcan.window.openToast("获取数据失败", 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;}}