it-swarm.com.ru

JQuery UI автозаполнение с элементом и идентификатором

У меня есть следующий скрипт, который работает с одномерным массивом. Можно ли заставить это работать с 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);
});
50
oshirowanen

Вам нужно использовать свойства 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

71
JK.

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

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

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

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.

Правка

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

34
Salman A

Мой код работал только тогда, когда я добавил «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.

10
Paty Lustosa

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

http://salman-w.blogspot.ca/2013/12/jquery-ui-autocomplete-examples.html#example-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;
    }

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

7
Benjohn P. Villedo
<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 я возвращаю значение из функции в опцию select.

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

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

3
Eric Rohlfs

Предполагая, что объекты в вашем исходном массиве имеют свойство 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;
});
3
Nattrass

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

Вот пример.

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

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

Вот соответствующая часть, на которую я ссылаюсь.

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

2
Kevin Lee

Наконец, я сделал это. Спасибо большое, друзья, и особая благодарность г-ну 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
Aadil Masavir

Это можно сделать без использования скрытого поля. Вы должны воспользоваться возможностью 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
Waris Ali

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