Jquery自动完成显示名称并发送Id

问题描述：

如何更改我的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, 
});

答

您可以添加一个隐藏字段，并使用在特定事件的隐藏字段的值设置为选定的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">

答

我对你的后台一无所知。但假设它正在接受您的搜索参数的ID，那么将source值更改为sellersID可以解决您的问题吗？消息来源之后，您还有额外的逗号。它会导致你的问题。

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

Jquery自动完成显示名称并发送Id

相关推荐