JQuery Автозаполнение Установить скрытое значение ввода - PullRequest
Новая
       23

JQuery Автозаполнение Установить скрытое значение ввода

0 голосов
/ 19 мая 2019

У меня есть следующее автозаполнение jquery, которое работает. 

<input type="hidden" id="autocompletePid" autocomplete="off" />

Соответствующий JS 

<script type="text/javascript">
    $(function() {

        $("#autocomplete").autocomplete(
                {
                    source : function(request, response) {
                        $.ajax({
                            type : 'GET',
                            url : "/live-search" + '?term=' + request.term,
                            success : function(data) {
                                response($.map(data, function(item) {
                                    return {
                                        label : item.street + ' '
                                                + item.city.city + ', '
                                                + item.state.stateCode
                                                + ' '
                                                + item.zipcode.zipcode,
                                        value : item.pid
                                    }
                                }));
                            },
                            minLength : 3
                        })
                    }

                });

    });
</script>

Соответствующий HTML 

<div id="tabs-1" class="ui-tabs-hide">
    <input type="text" id="autocomplete" autocomplete="off"
        placeholder="Enter an address or city..." /> <input
        type="submit" value="GO" />
</div>

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

<input type="hidden" id="autocompletePid" autocomplete="off" />

Как бы я это сделал?

Ответы [ 2 ]

1 голос
/ 19 мая 2019

Попробуйте следующий код: 

 <script type="text/javascript">
        $(function() {

            //Create a array call 'auto_array'
            var auto_array = {};
            var label = '';
            $("#autocomplete").autocomplete(
                    {
                        source : function(request, response) {
                            $.ajax({
                                type : 'GET',
                                url : "/live-search" + '?term=' + request.term,
                                success : function(data) {
                                    response($.map(data, function(item) {
                                    label  = item.street + ' '+ item.city.city  + ', '+ item.state.stateCode + ' '+ item.zipcode.zipcode;

                                    //Put the id of label in to auto_array. use the label as key in array
                                    auto_array[label] = item.pid;
                                    return label;

                                    }));
                                },

                            })
                        },

                       minLength : 3,

                        //On select the label get the value(id) from auto_array and put in hidden input field 'autocompletePid'
                         select: function(event, ui) {
                         console.log(auto_array);
                         $('#autocompletePid').val(auto_array[ui.item.value]);
                        }

                    });

        });
    </script>
0 голосов
/ 19 мая 2019

Шаги:

  1. Измените возвращаемое значение, чтобы сохранить pid. установите метку и значение в качестве отображаемого значения: 

    var label = item.street + ' '
            + item.city.city + ', '
            + item.state.stateCode
            + ' '
            + item.zipcode.zipcode;
return {
    label : label,
    value : label,
    pid : item.pid
}

  2. Привязка к функции select из автозаполнения для установки значения в другое поле по вашему желанию 

    select: function (event, ui) {
    $(autocompletePid).val(ui.item ? ui.item.pid : "");
}

Вот полная рабочая скрипка: https://jsfiddle.net/q9zyejd0/16/. Примечания:

  1. Я изменил скрытый ввод на отключенный текст, чтобы вы могли видеть изменения значения.
  2. Я использовал mocky.io для имитации вызова API. Он игнорирует введенное значение, просто возвращает постоянный адрес, как вы определили в своем коде.
  3. Обратите внимание, что select не сработает при удалении значения из текстового поля. Вам следует либо связать вручную с change (что приведет к обновлению скрытого поля, когда вы фокусируете вне текстового поля, немного уродливее, но работает лучше), либо вручную исправить это с помощью $(autocomplete).focusout.
...