我有以下适用于一维数组的脚本。是否有可能让它与二维数组一起使用？然后，通过单击页面上的第二个按钮，无论选择哪个项目，都应该显示所选项目的 id。
这是一维数组的脚本：
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 （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
从 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"
}];
您可以通过使用and的参数访问focus和select事件内部的标签和值属性。uiui.item.labelui.item.value
编辑
似乎您必须“取消”焦点并选择事件，以便它不会将 id 号放在文本框中。这样做时，您可以将值复制到隐藏变量中。这是一个例子。
我的代码仅在我将“return false”添加到选择函数时才有效。如果没有这个，输入在 select 函数中设置了正确的值，然后在 select 函数结束后将其设置为 id 值。return 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 );
}
});
此外，我在更改事件中添加了一个函数，因为如果用户在输入中写了一些内容或在选择了一个项目后删除了项目标签的一部分，我需要更新隐藏字段，这样我就不会得到错误（过时的）ID。例如，如果我的来源是：
var $local_source = [
{value: 1, label: "c++"},
{value: 2, label: "java"}]
并且用户键入 ja 并选择带有自动完成功能的“java”选项，我将值 2 存储在隐藏字段中。如果用户从“java”中删除一个字母，例如在输入字段中以“jva”结尾，我无法将 id 2 传递给我的代码，因为用户更改了值。在这种情况下，我将 id 设置为 0。
只是想分享对我有用的东西，以防它也能帮助别人。或者，根据上面 Paty Lustosa 的回答，请允许我添加从该站点派生的另一种方法，其中他使用 ajax 方法作为源方法
http://salman-w.blogspot.ca/2013/12/jquery-ui-autocomplete-examples.html#example-3
踢脚线是来自您的 php 脚本（下面的 list.php）的结果“字符串”或 json 格式，它派生要显示在自动完成字段中的结果集应该遵循如下内容：
{"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;
}
希望这会有所帮助......一切顺利！
假设源数组中的对象具有 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;
});
<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 的类。
将 List 传递给 JavaScript 序列化程序，并返回响应。
最后我做到了，非常感谢朋友，特别感谢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">
script 功能在我的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，您可以将其隐藏，只需将 type=hidden 而不是 text 用于 html 中的第二个输入项
谢谢 ！
我认为不需要破解 value 和 label 属性，使用隐藏的输入字段或抑制事件。您可以将自己的自定义属性添加到每个 Autocomplete 对象，然后稍后读取该属性值。
这是一个例子。
$(#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);
}
});
文档提到您必须传入具有标签和值属性的对象数组。但是，您当然可以传入具有超过这两个属性的对象并稍后阅读它们。
这是我所指的相关部分。
数组：数组可用于本地数据。支持的格式有两种： 字符串数组： [ "Choice1", "Choice2" ] 具有标签和值属性的对象数组： [ { label: "Choice1", value: "value1" }, ... ] label 属性显示在建议菜单中。当用户选择一个项目时，该值将被插入到输入元素中。如果只指定了一个属性，它将用于两者，例如，如果您只提供值属性，则该值也将用作标签。
我已经尝试在标签文本的文本框中显示上面的代码（值或 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);
}
});
## 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
这可以在不使用隐藏字段的情况下完成。您必须利用 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
});