0

那里描述使用 jquery/ui 自动完成的完全不同方法的教程数量惊人。找出正确的方法来做这件事，为什么要这样做，以及如何改进它是极其困难的。

我只需要 1 个元素就能使其正常工作，但现在需要更多。

为简单起见，我只从 mySQL 返回 2 个元素（group_list.name 和 group_list.description）。我想以某种方式通过自动完成将它们显示在一起！我希望这很容易！

HTML：

<form method="POST" url="<?php echo base_url() ?>/blurb/main/search" action="welcome/find_group">
    <input type="text" id="find_group" name="find_group" placeholder=" Find Group"></input>
    <input type="image" id="image" src="<?php echo base_url() ?>img/board/icons/add.jpg" id="homeSubmit" value="X"></input>
</form>

JS：

$(function() {
$( "#find_group" ).autocomplete({
        source: function(request, response) {
            $.ajax({
            url: "welcome/search/",
            data: { term: $("#find_group").val()},
            dataType: "json",
            type: "POST",
            success: function(data){
               var resp = $.map(data,function(obj){
                    return obj.name;
               }); 
               response(resp);
            }
        });
    },
    minLength: 1
    });
});

PHP：

控制器（欢迎/搜索）

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

模型->自动完成：

public function autocomplete($term)
{
    $term = $this->page_model->trimfilter($term);
    $query = $this->db->query("SELECT g.name, g.description FROM group_list g
                                WHERE g.name LIKE '".$term."%'
                                GROUP BY g.name
                                LIMIT 0, 5");
    echo json_encode($query->result_array());
}
4

1 回答 1

3

在你的 ajax 的成功函数中尝试这样的事情：

success: function(data) {
        response($.map(data, function(obj) {
            return {
            label: obj.description,
            value: obj.name,
            id: obj.name
            };
        }));
    }
于 2012-07-27T15:14:19.310 回答