select2が自動的にAjaxコールの項目を選択します

Question

ajaxレスポンスに余分なデータが含まれている場合、select2コントロールが項目を自動的に選択する方法はありますか？

JsonResultでアイテムを正確なマーカとしてマークし、次にselect2コントロールに自動的にドロップするようにコントローラを実装したいと思います。

ユーザから： ユーザがコントローラの項目と正確に一致するselect2テキストボックスの文字列を入力した場合。例えばバーコードとコントローラメソッドのユーザータイプがそのバーコードを見つけた場合。 Select2コントロールはドロップダウンを開かずにすぐにその項目を選択します。

コントローラーと正確に一致しないクエリのユーザータイプが、パラメーターが正確でないアイテムのリストを返す場合、select2はドロップダウンを開き、ユーザーがアイテムを選択できるようにします。

Answer 1

AJAXでこれを行うには、選択したDOM要素に選択したオプションを追加してから、select2ウィジェットの変更をトリガーして再描画する必要があります。以下はあなたが探しているものかもしれません。この例では、processResultsを使用して、正確に1つの一致があり、ユーザーが入力したものと正確に一致するかどうかを確認します。

$("#product_id").select2({ 
    ajax: { 
    url: "/api/productLookup", 
    dataType: 'json', 
    data: function (params) { 
     return { 
     term: params.term, 
     }; 
    }, 
    processResults: function (data) { 
     var searchTerm = $("#product_id").data("select2").$dropdown.find("input").val(); 
     if (data.results.length == 1 && data.results[0].text == searchTerm) { 
      $("#product_id").append($("<option />") 
       .attr("value", data.results[0].id) 
       .html(data.results[0].text) 
      ).val(data.results[0].id).trigger("change").select2("close"); 
     } 
     return data; 
    }, 
    minimumInputLength: 8, 
    cache: true 
    } 
});