如何使用项目ID获取JQuery UI自动完成function

我在这里看过这篇文章： 带有item和id的jQuery UI自动完成，但我无法解决问题。

这是我的输入html：

 '  

这是我的ajax电话：

 var data = {}; $.get('/tags',data, function(tag_list) { autocomplete_source_list = []; for(var i = 0; i < tag_list.length; i++){ autocomplete_source_list.push([tag_list[i].fields.display_name, [2,3,4,5,6,7,8,9,1,2]]); } jQuery( ".tags" ).autocomplete({ source: autocomplete_source_list, select: function (event, ui) { $(".tags").val(ui.item.label); // display the selected text $(".tags_id").val(ui.item.value); // save selected id to hidden input console.log("selected id: ", ui.item.label) } }); }); 

如果我将二维数组传递给源代码，如何设置ID？ 当我给出源只是文本时，ui.item.value = ui.item.label =“无论文本”。 我不知道如何附加id。

我可以帮忙吗？ 谢谢

Answer 1

从精细手册 ：

本地数据可以是一个简单的字符串数组，也可以包含数组中每个项目的对象，带有标签或值属性或两者。 label属性显示在建议菜单中。 用户从菜单中选择了某些内容后，该值将插入到input元素中。

所以label进入下拉菜单， value进入 ，你想要一些不同的东西，你想要一个东西在和菜单和另一件事在一个单独的 。

假设您从服务器获得了一些这样的原始数据：

 var raw = [ { value: 1, label: 'one' }, { value: 2, label: 'two' }, { value: 3, label: 'three' }, { value: 4, label: 'four' } ]; 

然后你可以构建一个数组和一个简单的映射对象：

 var source = [ ]; var mapping = { }; for(var i = 0; i < raw.length; ++i) { source.push(raw[i].label); mapping[raw[i].label] = raw[i].value; } 

source数组将被赋予.autocomplete() ，您的select处理程序将使用mapping来确定要放入 ：

 $('.tags').autocomplete({ source: source, select: function(event, ui) { $('.tags_id').val(mapping[ui.item.value]); } }); 

演示： http ： //jsfiddle.net/ambiguous/GVPPy/

Answer 2

您不需要映射。 您可以将自定义属性设置为源数组中的对象。 保留属性“label”和“value”。 然后可以通过事件处理程序中的ui.item.id访问自定义属性，如“id”。

 $("#input_id").autocomplete({ source:function(request, response){ $.ajax({ url: "/api/autocomplete", type: "POST", dataType: "json", data: { term: request.term }, success: function(responseData){ var array = responseData.map(function(element) { return {value: element['name'], id: element['id']}; }); response(array); } }) select: function(event, ui) { var name = ui.item.value; var id = ui.item.id; ... 

Answer 3

试试这个 ：

自动完成function：

  $(function() { $( "#firm_name" ).autocomplete({ source:'/autocomplete_firm_name', //url select: function( event, ui ) { // Where to used $( "#firm-name" ).val( ui.item.value ); $( "#firm-id" ).val( ui.item.id ); return false; } }); //autocomplete }); //function 

你的PHP脚本代码（autocomplete_firm_name）：

 public function autocomplete_firm_name() { extract($_GET); // $term variable contend your serach value // Execute your sql query here $datas=array(); if($query->num_rows() > 0 ){ foreach ($query->result() as $row) { $data=array(); $data['id']=$row->firm_id; $data['label']=$row->firm_name; $data['value']=$row->firm_name; $datas[]=$data; } } echo json_encode($datas); }