十一、Ajax下拉搜索框

image.png image.png

JS:

$(document).ready(function(){
    var xhr=null;
    $('#benefitPerson').bind('input propertychange', function() {
        if(xhr){
            xhr.abort();//如果存在ajax的请求，就放弃请求
        }

        var inputText= $.trim(this.value);
        if(inputText!=""){//检测键盘输入的内容是否为空，为空就不发出请求
            xhr=$.ajax({
                type: 'GET',
                url: '<?php echo base_url();?>index.php/ajax/ajaxBenefit',
                cache:false,//不从浏览器缓存中加载请求信息
                //data: "keyword=" + inputText,
                data: {keyword:inputText},
                dataType: 'json',
                success: function (json) {
                    if (json.length != 0) {//检测返回的结果是否为空
                        var lists = "<ul>";
                        $.each(json, function (index,obj) {
                            lists += "<li class='listName' name='listName[]'"+' data-id='+obj.id+">"+obj.username+"</li>";//遍历出每一条返回的数据
  //                                lists = '<li  class="syh" name="bank_name[]">'+obj.NAME+'</li>';
                        });
                        lists+='</ul>';

                        $("#searchBox").html(lists).show();//将搜索到的结果展示出来

                        $(".listName").click(function(){
                            $("#benefitPerson").val($(this).text());//点击某个li就会获取当前的值
                            $("#code").val($(this).attr('data-id'));
                            $("#searchBox").hide();
                        })

                    } else {
                        $("#searchBox").hide();
                    }
                }

            });
        }else{
            $("#searchBox").hide();//没有查询结果就隐藏搜索框
        }
    }).blur(function(){
        //$("#searchBox").hide();//输入框失去焦点的时候就隐藏搜索框
    });

});

PHP:

public function ajaxBenefit(){
    $this->load->model('User_model');
    $keyword   = $_GET['keyword'];
    //$keyword   = '张';
    //$keyword='中国';//获取输入框的内容
    $map['select']='id,username';
    $map['from'] = 'member';
    //$map['limit'] = '200';
    //$map['where_arr']['is_group'] = 1;                
    $map['like'] =  array('username',$keyword) ;
    $list['list'] = $this->User_model->selectAllList($map);
    //echo '<pre>';
    //print_r($list['list']);die;
    echo json_encode($list['list']);
}