jquery自动完成-返回并格式化多个元素 - jquery autocomplete - returning and formatting multiple elements

jquery autocomplete - returning and formatting multiple elements

本文关键字：格式化元素返回 jquery | 更新日期: 2024-01-02

描述使用jquery/ui自动完成的完全不同方法的教程数量惊人。找出正确的方法，为什么你应该这样做，以及如何改进它是非常困难的

我只需要一个元素就可以让它正常工作，但现在需要更多。

为了简单起见，我只是从mySQL返回两个元素（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());
}

在ajax的成功函数中，尝试以下操作：

success: function(data) {
        response($.map(data, function(obj) {
            return {
            label: obj.description,
            value: obj.name,
            id: obj.name
            };
        }));
    }