2017-12-18 74 views
1

如何更改我的jQuery自動完成以使用Id而不是我的值? 我想顯示名稱列表,但使用Id值發送搜索。現在它可以正確地處理名稱,但是如果它試圖找到一個唯一的ID作爲ID,它會更有效。Jquery自動完成顯示名稱併發送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, 
}); 

回答

1

您可以添加一個隱藏字段,並使用在特定事件的隱藏字段的值設置爲選定的ID

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

你也可以使用選擇數據與格式[{value: 'value', label: 'label'}]但採用這種方式,該領域將顯示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">

0

我對你的後臺一無所知。但假設它正在接受您的搜索參數的ID,那麼將source值更改爲sellersID可以解決您的問題嗎?消息來源之後,您還有額外的逗號。它會導致你的問題。

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