jquery中的自动完成功能无法正常工作

Question

这里是我的完整代码

我的html文件

 <input type="text" name="chname" id="chrname" placeholder="church name" />
                 <input type="text" name="chid" id="chrid"  />

我的jquery

 $(document).ready(function() {
$("#chrname").autocomplete({
            source: function( request, response ) {
            $.ajax({
                url: "localhost/deeps/genting/index.php/church/auto_comp/ch",
                dataType: "json",
                data: {term: $("#chrname").val()},
                success: function(data) {
                            response($.map(data, function(item) {
                            return {
                                label: item.churchname,
                                id: item.chid
                                };
                        }));
                    }
                });
            },
            minLength: 2,
            select: function(event, ui) {
                alert(ui.item.id);
                $('#chrid').val(ui.item.id);
            }
        });

}）;

我的控制器church.php

function auto_comp(){
   $q = strtolower($_GET["term"]);
   if(!$q) return;
    $res=$this->churchmodel->auto_compt($q);
    echo json_encode($res);

}

我的模型churchmodel.php

 function auto_compt($name){
$val="%".$name."%";
$query=$this->db->query("select distinct name as churchname, id as chid from church where name like '$val'");
if($query->num_rows>0){
    return $query->result();
}else{
    return false;
}

}

这是代码，但没有工作任何人请帮助我提前感谢.. 我用的参考 http://www.jensbits.com/2011/08/24/using-jquery-autocomplete-when-remote-source-json-does-not-contain-label-or-value-fields/