我有以下脚本，它与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