输入框联动查询

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

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){  //把结果循环成html
                            str+='<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;
        }
    }

 

转载于:https://www.cnblogs.com/tingfengqieyu/p/5148518.html