jQuery UI自动完成项目和ID
我有以下脚本与1维数组一起工作。 是否有可能得到这个工作与2维数组？ 然后，无论select哪个项目，通过点击页面上的第二个button，应显示select的项目的ID。
这是1维数组的脚本：
var $local_source = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"]; $("#txtAllowSearch").autocomplete({ source: $local_source }); 这是检查id不完整的button的脚本：
$('#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 });
[编辑]您还问如何创buildmultidimensional array…
你应该可以像这样创build数组：
var $local_source = [[0,"c++"], [1,"java"], [2,"php"], [3,"coldfusion"], [4,"javascript"], [5,"asp"], [6,"ruby"]];
阅读更多关于如何在这里使用multidimensional array： http : //www.javascriptkit.com/javatutors/literal-notation2.shtml
从jQuery自动完成插件的Overview选项卡：
本地数据可以是一个简单的string数组，也可以是数组中的每个项目的对象，可以是标签属性，也可以是值属性，也可以同时包含两者。 标签属性显示在build议菜单中。 在用户从菜单中select一些东西后，该值将被插入到input元素中。 如果只有一个属性被指定，它将被用于两个，例如。 如果您仅提供值属性，则该值也将用作标签。
所以你的“二维”数组可能看起来像：
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" }];
您可以访问focus内的标签和值属性，并使用ui.item.label和ui.item.value通过ui参数select事件。
编辑
好像你必须“取消”焦点并select事件，这样它才不会把ID号码放在文本框中。 在这样做的时候，你可以改变一个隐藏variables的值。 这是一个例子 。
我的代码只有当我添加“返回false”selectfunction。 如果没有这个，那么在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 ); } });
另外，我为变化事件添加了一个函数，因为如果用户在input中写入了某些内容或者在select了一个项目后删除了部分项目标签，则需要更新隐藏字段，以便我不会错（过时）的ID。 例如，如果我的来源是：
var $local_source = [ {value: 1, label: "c++"}, {value: 2, label: "java"}]
和用户键入ja并select自动完成的'java'选项，我将值2存储在隐藏字段中。 如果用户从input字段中删除了一个字母“java”，例如以'jva'结尾，我不能传递给我的代码id 2，因为用户改变了这个值。 在这种情况下，我将ID设置为0。
只是想分享一下我的工作，以防万一也能帮助别人。 另外根据上面的Paty Lustosa的回答，请允许我添加从这个网站派生的另一种方法，他在源方法中使用ajax方法
http://salman-w.blogspot.ca/2013/12/jquery-ui-autocomplete-examples.html#example-3
kicker是从你的PHP脚本（listing.php下面）得到的“string”或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; }
希望这有助于…一切顺利！
<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设置值，我将返回从function的值到select选项。
MyDataFactory.ashx页面有一个包含三个属性Id，Label，Value的类。
将List传递给JavaScript串行器，并返回响应。
我不认为有必要绕过值和标签属性，使用隐藏的input字段或抑制事件。 您可以将自己的自定义属性添加到每个自动完成对象，然后再读取该属性值。
这是一个例子。
$(#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); } });
该文档提到你必须传递一个包含标签和值属性的对象数组。 但是，你可能肯定会传入超过这两个属性的对象，并在稍后阅读。
这是我所指的相关部分。
数组：数组可以用于本地数据。 有两种支持的格式：一个string数组：[“Choice1”，“Choice2”]具有标签和值属性的对象数组：[{label：“Choice1”，value：“value1”}，…]标签属性显示在build议菜单中。 当用户select一个项目时，该值将被插入到input元素中。 如果只指定了一个属性，则将用于这两个属性，例如，如果只提供值属性，则该值也将用作标签。
我已经尝试了上面的代码显示（值或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属性将允许您检索当前select的项目的属性。 在这种情况下，提醒所选项目的ID。
$('#button').click(function() { alert($("#txtAllowSearch").autocomplete("instance").selectedItem.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 });
最后我做到了非常感谢朋友们，特别感谢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">
脚本function是这样在我的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，你可以保持隐藏只是把types=隐藏，而不是第二个input项的文本在HTML
谢谢 ！
