jquery .autocompleteは最後のレコードのみを表示します

以下のコードではgetJSONというネストされたデータを処理しています。> 1レコードが返され、オートコンプリートでソートされています。 jquery .autocompleteは最後のレコードのみを表示します

最終的なデータが代わりに表示されるだけで、最後のレコードを意味し、return $("<li>")は以前はJSONデータを返さ上書きするようで更新する.autocomplete("instance")それぞれ呼び出しに渡され（6一致するレコードを言うことができます）

{ 
 
    "ok": [ 
 
    { 
 
     "myName": "Back Office", 
 
     "myModule": "back01", 
 
     "myDesc": "Developing a the platform" 
 
    }, 
 
    ...... 
 
    ] 
 
}

有効な6つのうちJSONです。

.autocompleteルーチンをデバッグするときに、レコード数に合わせて正しい回数だけループすると、各ループは前のレコードに追加するのではなく、新しいオブジェクトである<li>を上書きしているようです。

なぜ上書きが行われますか？

ありがとうございましたアート！

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
    <script> 
 
     $(function() { 
 
      $("#my_module_in").autocomplete({ 
 
       minLength: 1, 
 
       source: function(request ,response){ 
 
        $.getJSON("https://api.myapi.com/getStuff", function (data) { 
 

 
         $.each(data, function (okKey, val00) { 
 
          if (okKey === 'ok') { 
 
           $.each(val00, function (key201, val201) { 
 
            response($.map(data, function (item) { 
 
             return { 
 
              label: val201.myName, 
 
              value: val201.myModule+"_"+val201.myDesc, 
 
             } 
 
            })) 
 
           }) 
 
          }else{ 
 
           console.log("error:noJson"); 
 
          } 
 
         }) 
 

 
        }); 
 
       }, 
 

 
       focus: function(event, ui) { 
 
        console.log(ui.item.label); 
 
        return false; 
 
       }, 
 
       select: function(event, ui) { 
 
        $("#my_module_in").val(ui.item.label); 
 
        $("#my_module").val(ui.item.value); 
 
        $("#my_module_description").html(ui.item.value); 
 
        return false; 
 
       } 
 
      }) 
 

 
        .autocomplete("instance")._renderItem = function(ul, item) { 
 
       return $("<li>") 
 
         .append("<div>" + item.label + "<br>" + item.value + "</div>") 
 
         .appendTo(ul); 
 

 
      }; 
 

 
     }); 
 
    </script> 
 
</head> 
 
<body> 
 

 
<div id="my_module_label">Op_Group</div> 
 
<input id="my_module_in"> 
 
<input type="hidden" id="my_module"> 
 
<p id="my_module_description"></p>

出典

2017-07-12 art vanderlay

あなたは$.each ($.map())の操作で得られた結果を含む空の配列を必要としています。次に、$.map()関数では、すべての項目について、現在のオブジェクトを空の配列にプッシュします。

最後に、入力した配列で応答コールバック関数を呼び出します。

var result = []; 
$.each(val00, function(key201, val201) { 
    $.map(data, function(item) { 
    result.push({ 
     label: val201.myName, 
     value: val201.myModule + "_" + val201.myDesc 
    }); 
    }); 
}); 
response(result);

このような何か：コードの説明のための

$(function() { 
 
    $("#my_module_in").autocomplete({ 
 
     minLength: 1, 
 
     source: function(request, response) { 
 
     $.getJSON("https://gist.githubusercontent.com/dannyjhonston/51e9ea30dddd09d9f82a8e78b8a51de2/raw/9ad8b1b40377a6807548b444491846dd13025902/getStuff.json", function(data) { 
 

 
      $.each(data, function(okKey, val00) { 
 
      if (okKey === 'ok') { 
 
       var result = []; 
 
       $.each(val00, function(key201, val201) { 
 
       $.map(data, function(item) { 
 
        result.push({ 
 
        label: val201.myName, 
 
        value: val201.myModule + "_" + val201.myDesc 
 
        }); 
 
       }); 
 
       }); 
 
       response(result); 
 
      } else { 
 
       console.log("error:noJson"); 
 
      } 
 
      }); 
 
     }); 
 
     }, 
 

 
     focus: function(event, ui) { 
 
     console.log(ui.item.label); 
 
     return false; 
 
     }, 
 
     select: function(event, ui) { 
 
     $("#my_module_in").val(ui.item.label); 
 
     $("#my_module").val(ui.item.value); 
 
     $("#my_module_description").html(ui.item.value); 
 
     return false; 
 
     } 
 
    }) 
 

 
    .autocomplete("instance")._renderItem = function(ul, item) { 
 
     return $("<li>").append("<div>" + item.label + "<br />" + item.value + "</div>").appendTo(ul); 
 
    }; 
 
});

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
<div id="my_module_label">Op_Group</div> 
 
<input id="my_module_in" type="text"> 
 
<input type="hidden" id="my_module"> 
 
<p id="my_module_description"></p>

出典

2017-07-12 18:22:25

おかげで、素晴らしい作品。 –

jquery .autocompleteは最後のレコードのみを表示します

答えて

関連する問題