我有以下基于用戶顯示名稱自動完成的 javascript。問題是自動完成輸入欄位是顯示名稱。每個用戶實際上都有一個用戶 ID，但我想根據顯示名稱在自動完成中查找用戶，但是當我提交表單時，我想提交用戶 ID 本身。
<script>
$(document).ready(function() {
$("input#autocomplete").autocomplete({
source: [
"John Doe",
"Another User",
]
});
});
</script>
<input id="autocomplete" name="autocomplete"/>
誰能建議我如何做到這一點？理想情況下，在源代碼中，有沒有辦法將用戶 ID 也作為值，并且以某種方式提交了用戶 ID 但帶有顯示名稱？
uj5u.com熱心網友回復：
而不是只使用一個陣列，您可以在陣列中使用物件，這樣您仍然可以搜索匹配的顯示名稱并回傳用戶 ID
代替：
source: [
"John Doe",
"Another User",
]
你可以做：
var sourceValues = [
{label: "John Doe", value: 1},
{label: "Another User", value: 2},
]
$("#autocomplete").autocomplete({
source: sourceValues.map(lang=>lang.label),
});
uj5u.com熱心網友回復：
考慮以下示例。
$(function() {
$("#user_name").autocomplete({
source: [{
label: "John Doe",
value: 1001
}, {
label: "Jonny Appleseed",
value: 1002
},{
label: "Jane Doe",
value: 1003
}],
select: function(e, ui) {
$("#user_name").val(ui.item.label);
$("#user_id").val(ui.item.value);
return false;
}
});
});<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<div>Name: <input id="user_name" /></div>
<div>ID: <input type="text" id="user_id" /></div>這是基于這個例子：https ://jqueryui.com/autocomplete/#custom-data
如果你定義了一個更復雜的源，你可以在select回呼中使用它。ui.item表示選中的物件。它有一個label，value你可以把它放在各個領域。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/430896.html