автозаполнение jQuery UI с помощью item и id

на вкладке Обзор плагина автозаполнения jQuery:

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

таким образом, ваш" двумерный " массив может выглядеть так:

var $local_source = [{
    value: 1,
    label: "c++"
}, {
    value: 2,
    label: "java"
}, {
    value: 3,
    label: "php"
}, {
    value: 4,
    label: "coldfusion"
}, {
    value: 5,
    label: "javascript"
}, {
    value: 6,
    label: "asp"
}, {
    value: 7,
    label: "ruby"
}];

вы можете получить доступ к свойствам метки и значения внутри focus и select событие через ui аргумент с помощью ui.item.label и ui.item.value.

редактировать

Похоже, вам нужно "отменить" фокус и выбрать события, чтобы он не размещал идентификатор числа внутри текстовых полей. При этом вы можете скопировать значение в скрытую переменную. вот пример.

мой код работал только тогда, когда я добавил "return false" в функцию select. Без этого вход был установлен с правильным значением внутри функции select, а затем он был установлен на значение id после завершения функции select. Возврат false решил эту проблему.

$('#sistema_select').autocomplete({

    minLength: 3,
    source: <?php echo $lista_sistemas;?> ,
    select: function (event, ui) {
         $('#sistema_select').val(ui.item.label); // display the selected text
         $('#sistema_select_id').val(ui.item.value); // save selected id to hidden input
         return false;
     },
    change: function( event, ui ) {
        $( "#sistema_select_id" ).val( ui.item? ui.item.value : 0 );
    } 
});

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

var $local_source = [
       {value: 1,  label: "c++"}, 
       {value: 2,  label: "java"}]

и тип пользователя ja и выберите опцию "java" с автозаполнением, я сохраняю значение 2 в скрытом поле. Если пользователь стирает букву из "java", например, " jva " в поле ввода, я не могу передать в свой код идентификатор 2, потому что пользователь изменил значение. В этом случае я устанавливаю id в 0.

просто хочу поделиться тем, что сработало на моем конце, в случае, если он сможет помочь кому-то еще. Альтернативно, основываясь на ответе пати Лустосы выше, позвольте мне добавить еще один подход, полученный с этого сайта, где он использовал подход ajax для исходного метода

http://salman-w.blogspot.ca/2013/12/jquery-ui-autocomplete-examples.html#example-3

Кикер-это результирующая "строка" или формат json из вашего PHP-скрипта (листинг.php ниже) это выводит результирующий набор, который будет показан в поле автозаполнения, должен следовать чему-то вроде этого:

    {"list":[
     {"value": 1, "label": "abc"},
     {"value": 2, "label": "def"},
     {"value": 3, "label": "ghi"}
    ]}

затем в исходной части метода автозаполнения:

    source: function(request, response) {
        $.getJSON("listing.php", {
            term: request.term
        }, function(data) {                     
            var array = data.error ? [] : $.map(data.list, function(m) {
                return {
                    label: m.label,
                    value: m.value
                };
            });
            response(array);
        });
    },
    select: function (event, ui) {
        $("#autocomplete_field").val(ui.item.label); // display the selected text
        $("#field_id").val(ui.item.value); // save selected id to hidden input
        return false;
    }

надеюсь, что это помогает... всего наилучшего!

<script type="text/javascript">
$(function () {
    $("#MyTextBox").autocomplete({
        source: "MyDataFactory.ashx",
        minLength: 2,
        select: function (event, ui) {
            $('#MyIdTextBox').val(ui.item.id);
            return ui.item.label;
        }
    });
});

приведенные выше ответы помогли, но не сработали в моей реализации. Вместо того, чтобы использовать значение с помощью jQuery, я возвращаю значение из функции выберите параметр.

В MyDataFactory.страница ashx имеет класс с тремя свойствами Id, Label, Value.

передайте список в сериализатор JavaScript и верните ответ.

Я не думаю, что нужно взломать свойства value и label, использовать скрытые поля ввода или подавлять события. Вы можете добавить свое собственное свойство к каждому объекту автозаполнения, а затем прочитать это значение свойства позже.

вот пример.

$(#yourInputTextBox).autocomplete({
    source: function(request, response) {
        // Do something with request.term (what was keyed in by the user).
        // It could be an AJAX call or some search from local data.
        // To keep this part short, I will do some search from local data.
        // Let's assume we get some results immediately, where
        // results is an array containing objects with some id and name.
        var results = yourSearchClass.search(request.term);

        // Populate the array that will be passed to the response callback.
        var autocompleteObjects = [];
        for (var i = 0; i < results.length; i++) {
            var object = {
                // Used by jQuery Autocomplete to show
                // autocomplete suggestions as well as
                // the text in yourInputTextBox upon selection.
                // Assign them to a value that you want the user to see.
                value: results[i].name;
                label: results[i].name;

                // Put our own custom id here.
                // If you want to, you can even put the result object.
                id: results[i].id;
            };

            autocompleteObjects.push(object);
        }

        // Invoke the response callback.
        response(autocompleteObjects);
    },
    select: function(event, ui) {
        // Retrieve your id here and do something with it.
        console.log(ui.item.id);
    }
});

на документация упоминает, что вы должны передать массив объектов со свойствами label и value. Тем не менее, вы можете, конечно, пройти в объекты с больше чем эти два свойства и прочтите их позже.

вот соответствующая часть, о которой я говорю.

Array: массив может использоваться для локальных данных. Есть два поддерживаемых форматы: массив строк: ["Choice1"," Choice2"] массив объекты со свойствами label и value: [ { label: "Choice1", value: "значение1" }, ... ] Свойство label отображается в предложении меню. Значение будет вставлено в элемент ввода, когда пользователь выбирает пункт. Если указано только одно свойство, оно будет использоваться для обоих, например, если вы предоставляете только свойства value, значение будет также используйте как ярлык.

Это можно сделать без использования скрытого поля. Вы должны воспользоваться возможностью JQuerys создавать пользовательские атрибуты во время выполнения.

('#selector').autocomplete({
    source: url,
    select: function (event, ui) {
        $("#txtAllowSearch").val(ui.item.label); // display the selected text
        $("#txtAllowSearch").attr('item_id',ui.item.value); // save selected id to hidden input
    }
});

$('#button').click(function() {
    alert($("#txtAllowSearch").attr('item_id')); // get the id from the hidden input
}); 

наконец-то я сделал это спасибо много друзей, и особая благодарность Mr https://stackoverflow.com/users/87015/salman-a из-за его кода я смог решить его правильно. наконец, мой код выглядит так, как я использую groovy grails, я надеюсь, что это поможет кому-то там.. Большое спасибо

html-код выглядит так на моей странице gsp

  <input id="populate-dropdown" name="nameofClient" type="text">
  <input id="wilhaveid" name="idofclient" type="text">

функция скрипта такова на моей странице gsp

  <script>
        $( "#populate-dropdown").on('input', function() {
            $.ajax({
                url:'autoCOmp',
                data: {inputField: $("#populate-dropdown").val()},
                success: function(resp){
                    $('#populate-dropdown').autocomplete({
                        source:resp,
                        select: function (event, ui) {
                            $("#populate-dropdown").val(ui.item.label);
                            $("#wilhaveid").val(ui.item.value);
                             return false;
                        }
                    })
                }
            });
        });
    </script>

и мой код контроллера, как это

   def autoCOmp(){
    println(params)
    def c = Client.createCriteria()
    def results = c.list {
        like("nameOfClient", params.inputField+"%")
    }

    def itemList = []
    results.each{
        itemList  << [value:it.id,label:it.nameOfClient]
    }
    println(itemList)
    render itemList as JSON
}

еще одна вещь, которую я не установил поле id скрыто, Потому что сначала я проверял, что я получаю точный id, вы можете сохранить его скрытым, просто поместите type=hidden вместо текста для второго элемента ввода в html

спасибо !

Я пробовал выше отображения кода (значение или идентификатор) в текстовом поле, созданном из текста метки. После этого я попробовал event.preventDefault () работает отлично...

var e = [{"label":"PHP","value":"1"},{"label":"Java","value":"2"}]

$(".jquery-autocomplete").autocomplete({
    source: e,select: function( event, ui ) {
        event.preventDefault();
        $('.jquery-autocomplete').val(ui.item.label);
        console.log(ui.item.label);
        console.log(ui.item.value);
    }
});

предполагая, что объекты в исходном массиве имеют свойство id...

var $local_source = [
    { id: 1, value: "c++" },
    { id: 2, value: "java" },
    { id: 3, value: "php" },
    { id: 4, value: "coldfusion" },
    { id: 5, value: "javascript" },
    { id: 6, value: "asp" },
    { id: 7, value: "ruby" }];

получение текущего экземпляра и проверка его свойства selectedItem позволит вам получить свойства текущего выделенного элемента. В этом случае оповещение id выбранного элемента.

$('#button').click(function() {
    alert($("#txtAllowSearch").autocomplete("instance").selectedItem.id;
});