如何让 JQuery UI 自动完成与项目 ID 一起工作答案

【问题标题】：How to get JQuery UI Autocomplete work with item id如何让 JQuery UI 自动完成与项目 ID 一起工作
【发布时间】：2012-01-28 01:11:16
【问题描述】：

我在这里看到了这篇文章：jQuery UI autocomplete with item and id，但我无法弄清楚。

这是我输入的 html：

<input type="text" class="tags" style="width:250px; height:24px;"> </input>' 
<input type="hidden" name="tags_id" id="tags_id" />

这是我的 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 = "whatever text"。我看不到如何附加 id。

我能得到一些帮助吗？谢谢

【问题讨论】：

标签： jquery jquery-ui jquery-ui-autocomplete

【解决方案1】：

来自fine manual：

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

所以label 进入下拉菜单，value 进入<input type="text">，你想要一些不同的东西，你想要一个东西在 <input type="text"> 和菜单中，另一个东西在单独的<input type="hidden">.

假设你从你的服务器得到了一些像这样的原始数据：

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 来确定在 <input type="hidden"> 中放入的内容：

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

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

【讨论】：

【解决方案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;
      ...

【讨论】：

【解决方案3】：

试试这个：

自动补全功能：

 $(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 Script (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);

    }

【讨论】：