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

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

3 голосов
/ 28 января 2012

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

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

Ответы [ 3 ]

4 голосов
/ 28 января 2012

Из тонкой инструкции :

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

Таким образом, 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 голосов
/ 08 августа 2013

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

Попробуйте:

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

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

    }
...