我有以下腳本，它與1維數組一起工作。是否有可能得到這個與2維數組一起工作？然後，無論選擇哪個項目，通過單擊頁面上的第二個按鈕，應顯示選擇的項目的ID。jQuery UI自動完成項目和編號
這與一維數組腳本：
var $local_source = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"];
$("#txtAllowSearch").autocomplete({
source: $local_source
});
這是腳本的按鈕，檢查ID，它是不完整的：
$('#button').click(function() {
// alert($("#txtAllowSearch").someone_get_id_of_selected_item);
});
您需要使用UI .item.label（文字）和ui.item.value（標識）的屬性
$('#selector').autocomplete({
source: url,
select: function (event, ui) {
$("#txtAllowSearch").val(ui.item.label); // display the selected text
$("#txtAllowSearchID").val(ui.item.value); // save selected id to hidden input
}
});
$('#button').click(function() {
alert($("#txtAllowSearchID").val()); // get the id from the hidden input
});
[編輯]你還問我如何創建多維數組...
您應該能夠創建數組，像這樣：
var $local_source = [[0,"c++"], [1,"java"], [2,"php"], [3,"coldfusion"],
[4,"javascript"], [5,"asp"], [6,"ruby"]];
瞭解更多關於如何與多維數組在這裏工作：http://www.javascriptkit.com/javatutors/literal-notation2.shtml
從jQuery的自動完成插件的Overview選項卡：
本地數據可以是字符串的一個簡單的陣列 ，或者它包含對象爲 陣列中的每個項目，可以使用 標籤或值屬性或兩者。 標籤屬性顯示在 建議菜單中。在 用戶從 菜單中選擇了某些內容後，該值將被插入到輸入元素中的 。如果僅指定一個屬性 ，則它將用於兩個，例如 。如果您只提供 值屬性，則該值也將被用作標籤的 。
所以，你的「二維」數組可能看起來像：
var $local_source = [{
value: 1,
label: "c++"
}, {
value: 2,
label: "java"
}, {
value: 3,
label: "php"
}, {
value: 4,
label: "coldfusion"
}, {
value: 5,
label: "javascript"
}, {
value: 6,
label: "asp"
}, {
value: 7,
label: "ruby"
}];
您可以通過使用ui.item.label和ui.item.value的ui說法訪問內部focus和select事件的標籤和值的屬性。
編輯
好像你要「取消」的重點和選擇事件，以便它不會將文本框裏面的身份證號碼。在這樣做時，您可以將該值複製到隱藏的變量中。 Here is an example。
<script type="text/javascript">
$(function() {
$("#MyTextBox").autocomplete({
source: "MyDataFactory.ashx",
minLength: 2,
select: function (event, ui) {
$('#MyIdTextBox').val(ui.item.id);
return ui.item.label;
}
});
});
上述措施有助於但是，並沒有在我的實施工作。 而不是使用jQuery設置值，我將返回從功能的值到選擇選項。
MyDataFactory。ashx頁面有一個包含三個屬性Id，Label，Value的類。
將列表傳遞到JavaScript串行器，並返回響應。
我的代碼只有在向select函數添加'return false'時才起作用。如果沒有這個，輸入在select函數中設置了正確的值，然後在select函數結束後它被設置爲id值。返回錯誤解決了這個問題。
$('#sistema_select').autocomplete({
minLength: 3,
source: <?php echo $lista_sistemas;?> ,
select: function (event, ui) {
$('#sistema_select').val(ui.item.label); // display the selected text
$('#sistema_select_id').val(ui.item.value); // save selected id to hidden input
return false;
},
change: function(event, ui) {
$("#sistema_select_id").val(ui.item? ui.item.value : 0);
}
});
另外，我加入到改變事件的功能，因爲如果用戶在輸入寫東西，或刪除的項標籤的一部分被選定一個項目後，我需要更新的隱藏字段，以便我沒有得到錯誤的（過時的）身份證。例如，如果我的來源是：
var $local_source = [
{value: 1, label: "c++"},
{value: 2, label: "java"}]
和用戶類型JA並選擇具有自動填充的的Java'選項，我存儲在隱藏字段中的值2。如果用戶從'java'中刪除一個字母，例如在輸入字段中以'jva'結尾，我不能將id 2傳遞給我的代碼，因爲用戶更改了該值。在這種情況下，我將ID設置爲0.
只是想分享我的最終成果，以防萬一它能夠幫助其他人。或者基於上述帕蒂Lustosa的回答，請允許我補充從這個網站，他使用了AJAX方法爲源法
http://salman-w.blogspot.ca/2013/12/jquery-ui-autocomplete-examples.html#example-3
起腳得出另一種方法是產生「串」或JSON格式從你的PHP腳本（listing.php下文）得出的結果集在自動完成字段中顯示應遵循這樣的事情：在自動完成方法的源部分
{"list":[
{"value": 1, "label": "abc"},
{"value": 2, "label": "def"},
{"value": 3, "label": "ghi"}
]}
然後：
source: function(request, response) {
$.getJSON("listing.php", {
term: request.term
}, function(data) {
var array = data.error ? [] : $.map(data.list, function(m) {
return {
label: m.label,
value: m.value
};
});
response(array);
});
},
select: function (event, ui) {
$("#autocomplete_field").val(ui.item.label); // display the selected text
$("#field_id").val(ui.item.value); // save selected id to hidden input
return false;
}
希望這有助於......一切順利！
我不認爲有必要繞過值和標籤屬性，使用隱藏的輸入字段或抑制事件。您可以將自己的自定義屬性添加到每個自動完成對象，然後再讀取該屬性值。
下面是一個例子。
$(#yourInputTextBox).autocomplete({
source: function(request, response) {
// Do something with request.term (what was keyed in by the user).
// It could be an AJAX call or some search from local data.
// To keep this part short, I will do some search from local data.
// Let's assume we get some results immediately, where
// results is an array containing objects with some id and name.
var results = yourSearchClass.search(request.term);
// Populate the array that will be passed to the response callback.
var autocompleteObjects = [];
for (var i = 0; i < results.length; i++) {
var object = {
// Used by jQuery Autocomplete to show
// autocomplete suggestions as well as
// the text in yourInputTextBox upon selection.
// Assign them to a value that you want the user to see.
value: results[i].name;
label: results[i].name;
// Put our own custom id here.
// If you want to, you can even put the result object.
id: results[i].id;
};
autocompleteObjects.push(object);
}
// Invoke the response callback.
response(autocompleteObjects);
},
select: function(event, ui) {
// Retrieve your id here and do something with it.
console.log(ui.item.id);
}
});
的documentation提及您具有與標籤和值屬性的對象的陣列，以通過。但是，您肯定可以通過以上的對象傳遞以上的屬性，並在稍後閱讀。
這是我所指的相關部分。
數組：數組可以用於本地數據。有兩種格式支持 格式：字符串數組：[「Choice1」，「Choice2」]具有標籤和值屬性的 對象數組：[{label：「Choice1」，value： 「value1」}，.. 。]標籤屬性顯示在建議 菜單中。當用戶 選擇一個項目時，該值將被插入到輸入元素中。如果只指定了一個屬性，則對於兩者都將使用 。，如果您僅提供值屬性，則值 也將用作標籤。
這可以在不使用隱藏字段的情況下完成。您必須利用JQuerys在運行時製作自定義屬性的能力。
('#selector').autocomplete({
source: url,
select: function (event, ui) {
$("#txtAllowSearch").val(ui.item.label); // display the selected text
$("#txtAllowSearch").attr('item_id',ui.item.value); // save selected id to hidden input
}
});
$('#button').click(function() {
alert($("#txtAllowSearch").attr('item_id')); // get the id from the hidden input
});
最後我做到了非常感謝朋友，特別感謝先生https://stackoverflow.com/users/87015/salman-a的，因爲他的代碼，我能夠妥善解決這個問題。最後我的代碼是這樣看，因爲我使用Groovy的Grails我希望這會幫助別人那裏..非常感謝
HTML代碼看起來像這樣在我的GSP頁面
<input id="populate-dropdown" name="nameofClient" type="text">
<input id="wilhaveid" name="idofclient" type="text">
腳本函數是這個樣子的我的GSP頁面
<script>
$("#populate-dropdown").on('input', function() {
$.ajax({
url:'autoCOmp',
data: {inputField: $("#populate-dropdown").val()},
success: function(resp){
$('#populate-dropdown').autocomplete({
source:resp,
select: function (event, ui) {
$("#populate-dropdown").val(ui.item.label);
$("#wilhaveid").val(ui.item.value);
return false;
}
})
}
});
});
</script>
我的控制器代碼是這樣的
def autoCOmp(){
println(params)
def c = Client.createCriteria()
def results = c.list {
like("nameOfClient", params.inputField+"%")
}
def itemList = []
results.each{
itemList << [value:it.id,label:it.nameOfClient]
}
println(itemList)
render itemList as JSON
}
還有一件事我沒有設置ID字段隱藏，因爲一開始我正在檢查，我得到的確切ID，你可以保持它隱藏只是把類型=隱藏，而不是文字的第二個輸入項目在HTML
謝謝！
我試過上面的代碼顯示（值或ID）的文本框insted的標籤文本。從那以後，我已經試過event.preventDefault（）它的工作完美...
var e = [{"label":"PHP","value":"1"},{"label":"Java","value":"2"}]
$(".jquery-autocomplete").autocomplete({
source: e,select: function(event, ui) {
event.preventDefault();
$('.jquery-autocomplete').val(ui.item.label);
console.log(ui.item.label);
console.log(ui.item.value);
}
});
假設你的源數組中的對象有一個id屬性...
var $local_source = [
{ id: 1, value: "c++" },
{ id: 2, value: "java" },
{ id: 3, value: "php" },
{ id: 4, value: "coldfusion" },
{ id: 5, value: "javascript" },
{ id: 6, value: "asp" },
{ id: 7, value: "ruby" }];
獲取當前的保持實例並檢查其selectedItem屬性將允許您檢索當前選定項目的屬性。在這種情況下，提醒所選項目的ID。
$('#button').click(function() {
alert($("#txtAllowSearch").autocomplete("instance").selectedItem.id;
});
我該如何格式化數組才能使用它？ – oshirowanen 2011-01-27 10:52:56
所以這是不可能做到沒有隱藏的輸入？ – oshirowanen 2011-01-27 11:00:15
不，因爲有兩個數據：文本和ID。你不能把兩者都放到一個輸入中。而且你通常不想向用戶顯示id，所以需要輸入type =「hidden」才能進入。 – 2011-01-27 11:03:46