Как получить работу автозаполнения JQuery UI с идентификатором объекта

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" /> 

вот мой Аякс вызов:

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 массива на источник? когда я даю источнику быть только текстом, то и ui.item.value = ui.item.label = "любой текст". Я не вижу, как можно подключить идентификаторы.

Могу ли я получить помощь, пожалуйста. Благодаря

Answer 1

От fine manual:

Локальные данные могут быть простой массив строк, или содержит объекты для каждого элемента массива, либо с меткой или значение свойства или обоих. Свойство label отображается в меню предложений. Значение будет вставлено во входной элемент после того, как пользователь выбрал что-то из меню.

Так 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» зарезервированы. Затем пользовательские атрибуты, такие как «id», могут быть доступны через ui.item.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 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); 

    }