Question

经过几个小时的解密教程后，我终于得到了codeigniter和jquery自动完成功能，可以互相协作......有点像。

Firebug以JSON格式显示正确的搜索字词，但下拉框未显示任何文本。如果有2个结果，则显示2个空行。

你可以在这里看到它“不起作用”：http://rickymason.net/blurb/main/home

JS：

$(document).ready(function() {
    $(function(){
        $( "#filter" ).autocomplete({
            source: function(request, response) {
                $.ajax({
                url: "http://rickymason.net/blurb/main/search/",
                data: { term: $("#filter").val()},
                dataType: "json",
                type: "POST",
                success: function(data){
                    response(data);
                }
            });
        },
        minLength: 2
        });
    });
});

控制器：

    public function search()
    {
        $term = $this->input->post('term', TRUE);
        $this->thread_model->autocomplete($term);
    }

型号：

    public function autocomplete($term)
    {
        $query = $this->db->query("SELECT tag
            FROM filter_thread ft
            INNER JOIN filter f
            ON ft.filter_id = f.filter_id
            WHERE f.tag LIKE '%".$term."%'
            GROUP BY tag");
        echo json_encode($query->result_array());
    }

希望它很容易解决！

由于

Answer 1

在SO上查看this question，您需要在回复中设置label和value字段。尝试安排您的PHP JSON输出以匹配或映射返回与以下内容（未经测试）。

response( $.map(data, function(item){
    return {
        label: item.tag,
        value: item.tag
    };
})

Answer 2

将代码更改为类似的内容（我已在您的网站中进行了测试）

$( "#filter" ).autocomplete({
        source: function(request, response) {
            $.ajax({
            url: "http://rickymason.net/blurb/main/search/",
            data: { term: $("#filter").val()},
            dataType: "json",
            type: "POST",
            success: function(data){
               var resp = $.map(data,function(obj){
                    return obj.tag;
               }); 

               response(resp);
            }
        });
    },
    minLength: 2
});

将上述代码块复制并粘贴到firebug控制台中，然后尝试自动完成。它会工作。我在你的网站上尝试过它。

其次，在完成同样的事情的同时，你不需要$(document).ready(function() {和$(function(){。

查看jQuery UI autocomplete

的此部分

预期数据格式

来自本地数据，网址或回调的数据可以有两种变体：

字符串数组：

[“Choice1”，“Choice2”]

带
的对象数组
标签和值属性：[{label：“Choice1”，value：“value1”}，

...]

参考：$.map

Jquery在codeigniter中自动完成检索值但不显示它们

2 个答案: