it-swarm.com.ru

jQuery UI автозаполнение с объектами

Я использую jQuery 1.11.2 и пытаюсь получить виджет автозаполнения для анализа массива данных. У меня есть люди в массиве, Уилл Смит и Виллем Дефо. Я ожидал, что оба имени будут добавлены в выпадающий список при вводе Wi в текстовом поле, но я не получил ответа. Вот копия кода:

<script src="js/jquery/jquery-1.11.2.js"></script>
<script src="js/jquery/jquery-ui.js"></script>
<link rel="stylesheet" href="js/jquery/jquery-ui.css"/>
<link rel="stylesheet" href="js/jquery/jquery-ui.theme.css"/>

<script type="text/javascript">
$(function() {
    var data = [
        {
            "id": 1,
            "first_name": "Will",
            "last_name": "Smith",
            "created_at": "2015-01-27T13:09:20.243Z",
            "updated_at": "2015-01-27T13:09:20.243Z"
        },
        {
            "id": 2,
            "first_name": "Willem",
            "last_name": "Dafoe",
            "created_at": "2015-01-27T13:17:23.479Z",
            "updated_at": "2015-01-27T13:17:23.479Z"
        }
    ];
    // Below is the name of the textfield that will be autocomplete    
    $('#search').autocomplete({
        // This shows the min length of charcters that must be typed before the autocomplete looks for a match.
        minLength: 2,
        // This is the source of the auocomplete suggestions. In this case a list of names from the people controller, in JSON format.
        source:data,
        // This updates the textfield when you move the updown the suggestions list, with your keyboard. In our case it will reflect the same value that you see in the     suggestions which is the person.given_name.
        focus: function(event, ui) {
            $('#search').val(ui.item.first_name);
            return false;
        },
        // Once a value in the drop down list is selected, do the following:
        select: function(event, ui) {
            // place the person.given_name value into the textfield called 'select_Origin'...
            $('#search').val(ui.item.first_name);
            // and place the person.id into the hidden textfield called 'link_Origin_id'. 
            $('#link_Origin_id').val(ui.item.id);
                return false;
        }
    }).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li></li>" ).data( "ui-autocomplete-item", item ).append( "<a>" + item.first_name + "</a>" ).appendTo( ul );
        // For now which just want to show the person.given_name in the list.                             
    };
});
</script>


Search: <input type="text" id="search" />

Код находится в одной html-папке на локальном диске. На этом этапе ни один сервер не задействован. Кроме того, я проверил инструмент проверки элементов на наличие ошибок, но они не отображаются, и все ресурсы найдены и загружены.

8
Darc Nawg

Проблема была в том, что Autocomplete не смог отобразить источник для своего функционирования.

Вам нужно установить источник автозаполнения на основе данных JSON, используя: 

source: function (request, response) {
           //data :: JSON list defined
           response($.map(data, function (value, key) {
                return {
                    label: value.first_name,
                    value: value.id
                }
            }));

    },

И я также удалил обратный вызов .data из кода.

Смотрите рабочий код здесь

25
Runcorn

Мне удалось сделать это чудесным образом следующим образом:

$(document).on('ready',function(){
  $(function() {
    var arrLinks = [
    {% for u in users %}
      {
        nombres: "{{ u.names }} {{u.sur_names}}",
        email: "{{ u.username }}",
        documento: {{ u.identificationNumber }},
        telefono: {{ u.phone }},
        label: '{{ u.names }} {{u.sur_names}} / {{ u.username }} * Doc: {{ u.identificationNumber }} - Cel: {{ u.phone }}'
      },
    {% endfor %}
    ];
    $("input[name=search]").autocomplete({
        source: arrLinks
    }).data("autocomplete")._renderItem = function(ul, item) {
        return $("<li>").data("item.autocomplete", item).append("<a>" + item.nombres + "</a>").appendTo(ul);
    };
  });

});

Примечание: я работаю с Symfony, с контроллера я отправляю объект пользователям и в представлении (ветка) я делаю FOR, с помощью которого я назначаю объекту javascript нужные мне данные. Важно определить в метке все параметры, которые вы хотите найти.

Демо-изображение!

$(document).on('ready',function(){
      $(function() {
        var arrLinks = [
          {
            nombres: "Fernando León",
            email: "[email protected]",
            documento: 10695846754,
            telefono: 3208123307,
            label: 'Fernando León / [email protected] * Doc: 10695846754 - Cel: 3208123307'
          },
          {
            nombres: "Edgar Molina",
            email: "[email protected]",
            documento: 736282826,
            telefono: 30087654637,
            label: 'Edgar Molina / [email protected] * Doc: 736282826 - Cel: 30087654637'
          }
        ];
        $("input[name=search]").autocomplete({
            source: arrLinks
        }).data("ui-autocomplete")._renderItem = function(ul, item) {
            return $("<li>").data("ui-autocomplete-item", item).append("<a>" + item.nombres + "</a>").appendTo(ul);
        };
      });

    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<input type="text" name="search">

1
Fernando León