我有以下脚本，它适用于1维数组。是否可以使用二维数组？然后，无论选择哪个项目，通过单击页面上的第二个按钮，都应显示选择的项目的ID。
这是具有1维数组的脚本：
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);
});
答案 0 :(得分：74)
您需要使用ui.item.label（文本）和ui.item.value（id）属性
$('#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
答案 1 :(得分：34)
从jQuery自动完成插件的Overview选项卡中：
本地数据可以是一个简单的数组 字符串，或包含对象 数组中的每个项目，带有a 标签或价值属性或两者。该 label属性显示在 建议菜单。价值将是 之后插入到input元素中 用户从中选择了一些东西 菜单。如果只有一个属性 指定，它将用于两者， 例如。如果你只提供 value-properties，值也会 用作标签。
所以你的“二维”数组看起来像：
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和ui.item.label通过ui.item.value参数访问focus和select事件中的标签和值属性。
修改
似乎您必须“取消”焦点并选择事件，以便它不会将ID号放在文本框中。这样做时，您可以将值复制到隐藏变量中。 Here is an example
答案 2 :(得分：10)
我的代码仅在我向select函数添加'return false'时才有效。如果没有这个，输入在select函数中设置了正确的值，然后在select函数结束后设置为id值。返回false解决了这个问题。
$('#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。
答案 3 :(得分：7)
只想分享我的最终成果，以防它能够帮助别人。或者根据上面的Paty Lustosa的回答，请允许我添加从该站点派生的另一种方法，他使用ajax方法来源方法
http://salman-w.blogspot.ca/2013/12/jquery-ui-autocomplete-examples.html#example-3
踢球者是结果＆＃34;字符串＆＃34;或者你的php脚本中的json格式（下面的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;
}
希望这有助于......一切顺利！
答案 4 :(得分：4)
<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设置值，我将函数的值返回到select选项。
MyDataFactory.ashx页面有一个包含三个属性Id，Label，Value。
的类将List传递给JavaScript序列化程序，然后返回响应。
答案 5 :(得分：3)
假设源数组中的对象具有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属性将允许您检索当前selceted项的属性。在这种情况下，警告所选项目的ID。
$('#button').click(function() {
alert($("#txtAllowSearch").autocomplete("instance").selectedItem.id;
});
答案 6 :(得分：2)
我认为不需要破解值和标签属性，使用隐藏的输入字段或抑制事件。您可以将自己的自定义属性添加到每个自动完成对象，然后稍后读取该属性值。
这是一个例子。
$(#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提到你必须传递一个带有label和value属性的对象数组。但是，您可以使用 more 传递对象，而不是这两个属性，稍后再读取它们。
以下是我所指的相关部分。
数组：数组可用于本地数据。有两个支持 格式：字符串数组：[＆＃34; Choice1＆＃34;，＆＃34; Choice2＆＃34; ]数组 具有标签和值属性的对象：[{label：＆＃34; Choice1＆＃34;，value： ＆＃34;值1＆＃34; }，...] label属性显示在建议中 菜单。该值将在用户时插入到input元素中 选择一个项目。如果只指定了一个属性，则将使用它 对于两者，例如，如果您仅提供值属性，则值将为 也可以用作标签。
答案 7 :(得分：2)
这可以在不使用隐藏字段的情况下完成。您必须利用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
});
答案 8 :(得分：2)
最后我做到了感谢很多朋友，特别感谢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中的第二个输入项
谢谢！
答案 9 :(得分：1)
我已尝试在标签文本的文本框中显示上面的代码（值或ID）。在那之后我尝试了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);
}
});
答案 10 :(得分：0)
## HTML Code For Text Box and For Handling UserID use Hidden value ##
<div class="ui-widget">
@Html.TextBox("userName")
@Html.Hidden("userId")
</div>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
jQuery脚本
$("#userName").autocomplete(
{
source: function (request,responce)
{
debugger
var Name = $("#userName").val();
$.ajax({
url: "/Dashboard/UserNames",
method: "POST",
contentType: "application/json",
data: JSON.stringify({
Name: Name
}),
dataType: 'json',
success: function (data) {
debugger
responce(data);
},
error: function (err) {
alert(err);
}
});
},
select: function (event, ui) {
$("#userName").val(ui.item.label); // display the selected text
$("#userId").val(ui.item.value); // save selected id to hidden input
return false;
}
})
label = u.person_full_name,
value = u.user_id