Question

我在这里看过这篇文章：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)
                    }
                });

            });

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

请帮我解决一下。感谢

Answer 1

来自fine manual：

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

所以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/

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() {            

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

    }

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

3 个答案: