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 に答える