首页 > 其他 > 详细

输入框联动查询

时间:2016-01-21 18:48:52      阅读:178      评论:0      收藏:0      [点我收藏+]

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

技术分享

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;" onclick="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;
        }
    }

 

输入框联动查询

原文:http://www.cnblogs.com/tingfengqieyu/p/5148518.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!