2016-07-11 3 views
0

아약스 응답에 추가 데이터가 포함되어있을 때 select2 컨트롤이 항목을 자동 선택하도록 할 수있는 방법이 있습니까?select2 자동으로 아약스 호출에 대한 항목을 선택

JsonResult에서 정확한 마하로 항목을 표시 한 다음 select2 컨트롤에 자동 조절을 구현하려면 drop n을 열지 말고 선택하십시오.

사용자 prepecitve에서 : 사용자가 컨트롤러의 항목과 정확히 일치하는 select2 텍스트 상자 문자열을 입력 한 경우. 예 : 사용자가 바코드 및 컨트롤러 메서드를 입력하면 해당 바코드를 찾습니다. Select2 컨트롤은 드롭 다운을 열지 않고 즉시 해당 항목을 선택합니다.

컨트롤러와 정확히 일치하지 않는 쿼리의 사용자 유형이 정확한 매개 변수없이 항목 목록을 반환하고 select2가 드롭 다운을 열어 사용자가 선택할 수있는 항목을 표시합니다.

답변

1

AJAX에서이 작업을 수행하려면 select DOM 요소에 선택한 옵션을 추가 한 다음 select2 위젯에서 변경 사항을 트리거하여 다시 그려야합니다. 아래는 당신이 찾고있는 것일 수 있습니다. 이 예제에서는 processResults를 사용하여 정확히 일치하는 항목이 하나 있는지 확인하고 사용자가 정확하게 입력 한 내용과 일치하는지 확인합니다.

$("#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 
    } 
}); 
+1

아약스의 select2 정의 내에서 작동합니까? – adopilot

+0

#barcode 요소의 변경 핸들러의 일부로이를 실행하므로 바코드가 스캔되면 제품이 업데이트됩니다. –

+0

백엔드가 아약스 요청에서 바코드를 가져올 수 있도록 예제 select2 정의를 포함하도록 답변을 업데이트했습니다. –

관련 문제