Как заставить JQuery UI Autocomplete работать с идентификатором элемента

Я видел этот пост здесь: автозаполнение пользовательского интерфейса jQuery с элементом и идентификатором, но я не смог разобраться.

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

Могу ли я получить некоторую помощь, пожалуйста. Спасибо


jquery jquery-ui jquery-ui-autocomplete
person Saher Ahwal    schedule 28.01.2012    source источник

Ответы (3)


arrow_upward
5
arrow_downward

Из отличного руководства:

Локальные данные могут быть простым массивом строк или содержать объекты для каждого элемента в массиве либо со свойством метки, либо со значением, либо с обоими. Свойство 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/

person mu is too short    schedule 28.01.2012

arrow_upward
2
arrow_downward

Вам не нужно отображение. Вы можете установить пользовательские атрибуты для объектов в исходном массиве. Атрибуты «метка» и «значение» зарезервированы. Затем к пользовательским атрибутам, таким как «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;
      ...
person kimkunjj    schedule 08.08.2013

arrow_upward
0
arrow_downward

Попробуй это :

Функция автозаполнения:

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

    }
person Satish    schedule 26.02.2016