JQuery UI автозаполнение с элементом и идентификатором - PullRequest
50 голосов
/ 27 января 2011

У меня есть следующий скрипт, который работает с одномерным массивом.Можно ли заставить это работать с 2-мерным массивом?Затем любой выбранный элемент, нажав на вторую кнопку на странице, должен отобразить идентификатор выбранного элемента.

Это скрипт с одномерным массивом:

var $local_source = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"];
$("#txtAllowSearch").autocomplete({
    source: $local_source
});

Это скрипт для кнопки для проверки идентификатора, который является неполным:

$('#button').click(function() {
    // alert($("#txtAllowSearch").someone_get_id_of_selected_item);
});

Ответы [ 11 ]

75 голосов
/ 27 января 2011

Вам необходимо использовать свойства ui.item.label (текст) и ui.item.value (идентификатор)

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

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

[Edit] Вы также спрашивали, как создать многомерный массив ...

Вы должны быть в состоянии создать массив следующим образом:

var $local_source = [[0,"c++"], [1,"java"], [2,"php"], [3,"coldfusion"], 
                     [4,"javascript"], [5,"asp"], [6,"ruby"]];

Подробнее о работе с многомерными массивами читайте здесь: http://www.javascriptkit.com/javatutors/literal-notation2.shtml

34 голосов
/ 27 января 2011

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

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

Итак, ваш «двумерный» массив может выглядеть так:

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.

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

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

12 голосов
/ 08 ноября 2013

Мой код работал только тогда, когда я добавил 'return false' в функцию выбора.Без этого вход был установлен с правильным значением внутри функции выбора, а затем он был установлен на значение идентификатора после завершения функции выбора.Возвращение 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, потому что пользователь изменил значение.В этом случае я установил идентификатор на 0.

7 голосов
/ 15 мая 2014

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

http://salman -w.blogspot.ca / 2013/12 / JQuery-щ-автозаполнения-examples.html # пример-3

Кикер - это результирующий формат "string" или json из вашего php-скрипта (перечисление ниже приведено в 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;
    }

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

4 голосов
/ 06 марта 2017

Предполагая, что объекты в вашем исходном массиве имеют свойство 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 позволит вам получить свойства текущего элемента, прошедшего сортировку.В этом случае оповещение об идентификаторе выбранного элемента.

$('#button').click(function() {
    alert($("#txtAllowSearch").autocomplete("instance").selectedItem.id;
});
4 голосов
/ 27 мая 2011
<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 и верните ответ.

2 голосов
/ 27 февраля 2017

Наконец-то я это сделал. Спасибо большое, друзья, и особая благодарность мистеру 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 скрыто, потому что сначала я проверял, что получаю точный идентификатор, его можно скрыть, просто поместив type = hidden вместо текста для второго элемента ввода в html

Спасибо!

2 голосов
/ 13 февраля 2017

Это можно сделать без использования скрытого поля. Вы должны воспользоваться возможностью 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
}); 
2 голосов
/ 12 июля 2016

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

Вот пример.

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

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

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

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

1 голос
/ 04 марта 2017

Я пробовал показывать код выше (значение или идентификатор) в текстовом поле вместо текста метки.После этого я попробовал 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);
    }
});
...