php - ajax応答jsonデータがドロップダウンに設定されていません

Question

$(document).ready(function(){
 $("#prjname").autocomplete("ajaxcomplete.php", {
        selectFirst: true,
                matchContains:true
    }).result(function(event, item) {
                 var id=item; 

                  $.ajax({
                           url: "db_data.php",
                           async: false,
                           data:"id="+id,
                           success: function(data)
                            {

                            }
                     })
                });
});

IUn ajax レスポンスのようなデータを取得できます

 [{"id":"1","name":"Analysis"},{"id":"2","name":"Coding"},{"id":"3","name":"Documentation"},{"id":"23","name":"ppt"}]

ドロップダウンにデータを入力する方法は？以下のコードで試してみました。

var arr = $.parseJSON(data);
                $('.act').empty();
                 $('#actname').append($('<option/>').attr("value","").text("Select Activity"));
                     arr.filter(function (option)
                        {
                            $('#actname').append($('<option/>').attr("value", option.id).text(option.name));
                        }) 

しかし、それはデータを埋めません。

Answer 1

あなたの成功のコールバックで：

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

編集: ここでの良い説明: http://www.jensbits.com/2011/08/24/using-jquery-autocomplete-when-remote-source-json-does-not-contain-label-or-value-fields /

Answer 2

$.ajax({
                           url: "db_data.php",
                           async: false,
                           data:"id="+id,
                           success: function(data)
                            {
                               var arr = $.parseJSON(data);
                               $('.act').empty();
                               $('#actname').append('<option value="" > Select Activity</option>');
                               $.each(arr, function(i, item) {
                                     $('#actname').append('<option value="'+item.id+'" >'+item.name+'</option>');

                                });

                            }
       })

Answer 3

これを試して

 $.ajax({
            url: "db_data.php",
            async: false,
            data:"id="+id,
            dataType:'json', //<---just to make sure the response is in JSOn so that you don't have to parse it again 
            success: function(data)
            {
                $('.act').empty();
                $('#actname').append($('<option/>').attr("value","").text("Select Activity"));
                $.each(data,function(i,v)
                {
                    $('#actname').append($('<option/>').attr("value", v.id).text(v.name));
                 }) 
            }
         })

Answer 4

これが「適切な」プラクティスかどうかはわかりませんが、一般的にはバックエンドの PHP スクリプトでドロップダウン リストを文字列として作成し、その文字列を ajax 呼び出しに返します。次に、単純な「select_field_id.innerHTML = returned_string」を実行して、ドロップダウン リストを埋めることができます。

そのように：PHPで：

$selecthtml .= "<option value='" . $val . "'>" . $text . "</option>";
echo $selecthtml;

次に、JavaScriptで：

document.getElementById("selectid").innerHTML = data;

繰り返しますが、これが「適切」かどうかはわかりませんが、私にとってはうまくいきます。

Answer 5

<script>
$(document).ready(function(){
 $("#prjname").autocomplete("ajaxcomplete.php", {
        selectFirst: true,
                matchContains:true
    }).result(function(event, item) {
                 var id=item; 
                    $.ajax({
                            type: "POST",
                            dataType: "json",
                            url: "db_data.php",
                            data: "id="+id,
                               success: function(data)
                                {
                                    alert(data);
                                    $('.act').empty();
                                    $('#actname').append($('<option/>').attr("value","").text("Select Activity"));
                                    for (var i = 0, len = data.length; i < len; ++i) 
                                    {
                                        var prj = data[i];
                                        $('#actname').append($('<option/>').attr("value", prj.id).text(prj.name));
                                        $('.project_id').val(prj.project_id);

                                    }
                                }
                             })

                });
});
</script>

これが私の解決策です。

Answer 6

on success loop through options
success: function(data)
    {
        var arr = $.parseJSON(data);
        $('.act').empty();
        $('#actname').append('<option value="" > Select Activity</option>');
        $.each(arr, function(i, item) {
             $('#actname').append(new Option(item.name,item.id));

        });

}