Автозаполнение jQuery UI с элементом и идентификатором - программирование
Подтвердить что ты не робот

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

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

Это script с 1-мерным массивом:

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

Это кнопка script для кнопки для проверки неполного идентификатора:

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

ОТВЕТЫ

Ответ 1

Вам нужно использовать свойства ui.item.label(текст) и ui.item.value(id)

$('#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

Ответ 2

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

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

Edit

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

Ответ 3

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

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

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

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

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

Ответ 4

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

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

Ответ 5

<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 и верните ответ.

Ответ 6

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

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

Ответ 7

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

Вот пример.

$(#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 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: "Choice1", value: "value1" },...] Свойство label отображается в предложении меню. Значение будет вставлено во входной элемент, когда пользователь выбирает элемент. Если указано только одно свойство, оно будет использоваться для обоих, например, если вы предоставляете только свойства значения, это значение будет также можно использовать в качестве метки.

Ответ 8

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

Ответ 9

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

script Функция такая же, как на моей странице 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

Спасибо!

Ответ 10

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

Ответ 11

Автозаполнение привязки текстового поля с использованием Jquery

  ## HTML Code For Text Box and For Handling UserID use Hidden value ##
  <div class="ui-widget">
@Html.TextBox("userName")  
    @Html.Hidden("userId")
    </div>

Ниже требуется библиотека

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Jquery Script

$("#userName").autocomplete(
{

    source: function (request,responce)
    {
        debugger
        var Name = $("#userName").val();

        $.ajax({
            url: "/Dashboard/UserNames",
            method: "POST",
            contentType: "application/json",
            data: JSON.stringify({
                Name: Name

            }),
            dataType: 'json',
            success: function (data) {
                debugger
                responce(data);
            },
            error: function (err) {
                alert(err);
            }
        });
    },
    select: function (event, ui) {

        $("#userName").val(ui.item.label); // display the selected text
        $("#userId").val(ui.item.value); // save selected id to hidden input
        return false;
    }
})

Возвращаемые данные должны быть ниже формата

 label = u.person_full_name,
 value = u.user_id