Jquery 자동 완성 표시 이름 및 송신 ID

Question

내 jQuery 자동 완성을 변경하여 값 대신 ID를 사용하려면 어떻게해야합니까? 이름 목록을 표시하고 싶지만 Id 값을 사용하여 검색을 보내고 싶습니다. 이제는 이름과 함께 제대로 작동하지만 ID로 고유 한 값을 찾으려는 것이 더 효과적 일 것이라고 생각합니다.

$.getJSON('Dashboard/CompaniesWithId', function (data) { 
    $.each(data, function (i, item) { 
    sellers[i] = item.Name; 
    sellersID[i] = item.Id; 
    }); 
}).error(function() { 
    console.log("error loading seller to the autocomplete"); 
}); 

$("#searchSeller").autocomplete({ 
    messages: { 
    noResults: 'No sellers with this name',   
    }, 
    minLength: 2, 
    delay: 500, 
    source: sellers, 
}); 

Answer 1

당신이 숨겨진 필드를 추가하고 또한 형식 [{value: 'value', label: 'label'}]로 선택 데이터를 사용할 수 있습니다

http://api.jqueryui.com/autocomplete/#event-select

선택한 ID에 숨겨진 필드의 값을 설정하는 선택 이벤트에 사용할 수 있지만, 이 방법을 사용하여 필드는 ID 대신 라벨을 보일 것

var availableTags = [ 
 
     {id: 1, label: "ActionScript"}, 
 
     {id: 2, label: "Ruby"}, 
 
     {id: 3, label: "Scala"}, 
 
     {id: 4, label: "Scheme"} 
 
    ]; 
 
    availableTags2 = [ 
 
     {value: 1, label: "ActionScript"}, 
 
     {value: 2, label: "Ruby"}, 
 
     {value: 3, label: "Scala"}, 
 
     {value: 4, label: "Scheme"} 
 
    ]; 
 
    $("#a").autocomplete({ 
 
     source: availableTags, 
 
     select: function(event, ui) { 
 
     $('#tosend').val(ui.item.id); 
 
     } 
 
    }); 
 
    $("#b").autocomplete({ 
 
     source: availableTags2 
 
    });

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script 
 
\t \t \t src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" 
 
\t \t \t integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" 
 
\t \t \t crossorigin="anonymous"></script> 
 
id to send<br> 
 
<input type="text" name="tosend" id="tosend"><br><br> 
 
type below<br> 
 
<input id="a"><br> 
 
<br> 
 
<br> 
 
using value instead of id<br> 
 
<input id="b">

Answer 2

백 엔드에 대해 알지 못합니다. 그러나 검색 매개 변수의 ID를 수락한다고 가정하면 source 값을 sellersID으로 변경하면 문제가 해결됩니까? 또한 소스 뒤에 추가 쉼표가 있습니다. 문제가 발생할 것입니다.

$("#searchSeller").autocomplete({ 
    messages: { 
    noResults: 'No sellers with this ID.',   
    }, 
    minLength: 2, 
    delay: 500, 
    source: sellersID 
});