jQuery автозаполнение получить идентификатор

Question

Есть демо, которое работает очень хорошо.http://jsfiddle.net/salman/VaKfP/

Но у меня возникли некоторые проблемы при выполнении примера кода.

<script>
var js = '<?php echo $json; ?>';
console.log(typeof js);
$(document).ready(function() {
    var arr = jQuery.parseJSON(js);

    //local = [{value:1, label: "c++"},{value:2, label: "java"},{value:3, label: "ruby"},{value:4, label: "rubyonrails"}];

    $("#nominee_input").autocomplete({
          source: arr,
          focus: function(event, ui){
                 $('#nominee_input').val(ui.item.name);
                 return false;
          },
          select: function(event, ui){
                 $('#nominee_input').val(ui.item.name);
                 $('#hidden').val(ui.item.uid);
                 return false;
          }
    });

    $('#submit').click(function(){
          alert($('#hidden').val());
    });

});
</script>

Переменная $ json имеет тип JSON, ее формат выглядит следующим образом: [Object {uid = "11443624", name = "angela"}, Object {uid = "21503235", name = "SunnyLee "}].

Если я изменю источник на local , он будет работать очень хорошо.Но это не работает, когда я использую arr в качестве источника.

Нужна ваша помощь.Спасибо.

Answer 1

Из документации :

Локальные данные могут быть простым массивом строк или содержать Объекты для каждого элемента в массиве со значением label или свойство или оба

Плагин автозаполнения ожидает в качестве источника массив объектов со свойствами: label или / и значение

Ваша переменная js не подходит для этого:

1. синтаксис неверен. Массив объектов должен быть определен следующим образом: [{key1: 'key1', key2: 'key2'}, ...]

2. вы не можете использовать $ .parseJSON (), поскольку это не объект json, а массив. Просто выведите свой php так:

   var js = <?php echo $json; ?>; // $json being [{uid:"11443624",name:"angela"},...]
   

---

Когда автозаполнение выполняет поиск на основе ввода, оно использует опцию source. Внутри плагин ожидает, что опция source будет функцией для выполнения. Хитрость заключается в том, что когда вы указываете массив или URL, плагин создает обертку вокруг него, чтобы иметь возможность использовать его (см. ответ ).

Если у вас есть пользовательский источник данных, вы можете указать в качестве ожидаемой функции параметр source. Это имеет форму:

source: function(request, response) { ... }

Параметр запроса содержит одно свойство request.term, которое представляет собой текст, введенный во входные данные, параметр ответа - это функция для отображения меню с предложениями. Используйте это так:

$("#nominee_input").autocomplete({
    source: function(request, response) {

        // $.map() builds an array understandable by autocomplete
        // $.ui.autocomplete.filter() will filter the array based on the request.term
        var filteredData = $.ui.autocomplete.filter($.map(arr, function(item) {
            return {
                value: item.name,
                label: item.name,
                uid: item.uid
            };
        }), request.term);

        // use the response callback to display the results
        response(filteredData);

    }
});

Демонстрация по jsfiddle

---

Если у вас есть определенный источник данных (с другими свойствами, кроме метки и значения), вы можете не отображать результаты в произвольном порядке. Для этого вы не можете переопределить метод по умолчанию _renderItem плагина автозаполнения:

$("#nominee_input").autocomplete({ ... })
    .data("autocomplete")
    ._renderItem = function( ul, item ) {
       return $( "<li></li>" )
           .data( "item.autocomplete", item )
           .append( $('<a>' + item.label + ' - ' + item.uid  + '</a>')
                          .attr('data-uid', item.uid)
           )
           .appendTo( ul );
    };

Answer 2

Если переменная формата arr действительно [{ uid="11443624", name="angela"}], = - это ваша проблема.Убедитесь, что ваш php правильно форматирует объект.Вам не нужно запускать parseJSON, если вы правильно отформатировали.Выходные данные php должны быть отформатированы с парами метка / значение, как в локальном примере {value:1, label: "c++"}.Автозаполнение не распознает пары uid / name, если вы не переопределите метод renderItem согласно примеру пользовательского интерфейса .

$( "#project" ).autocomplete({
            minLength: 0,
            source: projects,
            focus: function( event, ui ) {
                $( "#project" ).val( ui.item.label );
                return false;
            },
            select: function( event, ui ) {
                $( "#project" ).val( ui.item.label );
                $( "#project-id" ).val( ui.item.value );
                $( "#project-description" ).html( ui.item.desc );
                $( "#project-icon" ).attr( "src", "images/" + ui.item.icon );

                return false;
            }
        })
        .data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
                .appendTo( ul );
        };

Answer 3

Вы пробовали

$("#nominee_input").autocomplete({
    source: <?php echo $json; ?>, /* without '' ! */
    ...

Можете ли вы написать, что именно "echo $ json" пишет?

Answer 4

$.parseJSON возвращает объект, но похоже, что автозаполнение использует массив для параметра source.Вы пытались напрямую использовать эту переменную js для source?