Автозаполнение пользовательского интерфейса jQuery внезапно перестало работать

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

<html>
    <head>
    <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script>

    <script type="text/javascript">
        $(function() {
            $( "#city" ).autocomplete({
                source: function( request, response ) {
                    var cities = new Array();
                    cities.push({"label" : "Chicago", "value" : 1});
                    cities.push({"label" : "Houston", "value" : 2});
                    response(cities);
                },
                focus: function(event, ui) {
                    //console.log(ui.item.label);
                    $(this).text(ui.item.label);
                    //console.log($(this).text());
                    event.preventDefault();
                    //console.log($(this).text());
                },
                select: function(event, ui) {
                    //console.log($(this).text());
                    event.preventDefault();
                    //console.log($(this).text());
                }
            });
        });
    </script>
    </head>
    <body>
      <input id="city" />
    </body>
</html>

Я использую обработчик фокуса, чтобы показать метку в текстовом поле вместо значения (что делает автозаполнение по умолчанию). Сейчас происходит то, что в текстовом поле не отображается ни метка, ни значение, оно показывает значение, которое я набрал (скажем, «Чи»)

Это работало, но теперь это не так. Я думал, что это из-за того, что я включил какой-то другой javascript, и произошло столкновение имени функции. Но я переместил его в отдельный HTML-код, как вы можете видеть выше, и он все еще не работает.

Кстати, если я раскомментирую эти операторы журнала консоли и в раскрывающемся списке выберу Чикаго, тогда все они напечатают Чикаго.

Это похоже на какую-то глупую ошибку где-то, но я поставил в тупик. Какие-либо предложения?

РЕДАКТИРОВАТЬ 1: Кстати, если я удалю фокус и выберу обработчики, то автозаполнение будет работать с функциями по умолчанию.

РЕДАКТИРОВАТЬ 2: Было бы здорово, если бы кто-то мог проверить это на своем компьютере.


javascript jquery jquery-ui
person arahant    schedule 14.09.2012    source источник
comment
Вот jsFiddle, который работает для меня (jQuery 1.8.0, jQuery UI 1.8.23): jsfiddle.net/NkBfm. Единственное, что нужно изменить, это .text на .val, но вы говорите, что это работает в определенных случаях, так что это может быть не так.   -  person pimvdb    schedule 14.09.2012
comment
Я создал fifdle, проблема с наведением решена, но не могу понять, почему выбор не дает такого же результата?   -  person jaychapani    schedule 14.09.2012

Ответы (2)


arrow_upward
1
arrow_downward

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

  1. Вы хотите, чтобы "завершенная" переменная отображалась в основном вводе при ее выборе.
  2. Вы хотите, чтобы при выборе отображалась метка, а не значение.

Причины, по которым ни один из них в настоящее время не работает, связаны и просты: поля <input> имеют только связанное с ними значение, а не отдельные «метку» и «значение». Когда вы выбираете опцию «автозаполнение» из списка, это «значение», которое заполняется.

Для точки 1, части, которая обновляется событием focus:, просто замените .text(...) на .val(...), так как это атрибут поля <input>, который вы действительно хотите обновить:

focus: function(event, ui) {
    $(this).val(ui.item.label);
    event.preventDefault();
},

Для пункта 2, поскольку вы действительно хотите, чтобы поле заполнялось меткой, а не значением, вы можете просто заполнить один и тот же текст для обоих (по умолчанию, если задан плоский массив):

source: function( request, response ) {
    var cities = new Array();
    cities.push("Chicago");
    cities.push("Houston");
    response(cities);
},

Помните, что автозаполнение всегда необязательно. Все, что вам нужно заполнить для value:, это что-то, что вы можете полностью устранить. Это может быть id, но обычно имеет смысл использовать то, что пользователь мог ввести самостоятельно. Конечно, если вы делаете это, также может иметь смысл использовать ui.item.value вместо ui.item.label в событии focus:.

Когда исходный код приведен в порядок, как указано выше, вы можете полностью удалить событие select:.

person Will Palmer    schedule 14.09.2012
comment
Извините за вводящий в заблуждение вопрос. Я преобразовал text() в val(), и это сработало, а потом я забыл его проверить :( - person arahant; 14.09.2012

arrow_upward
0
arrow_downward

Я думаю, что проблема заключается в назначении источника автозаполнения. Это работает для меня:

$(function() {

    var cities = [ 
        {"label": "Chicago", "value": 1}, 
        {"label": "Houston", "value": 2}
    ];                    


    $( "#city" ).autocomplete({
        source: cities, // assign the source directly
        focus: function(event, ui) {
            //console.log(ui.item.label);
            $(this).text(ui.item.label);
            //console.log($(this).text());
            event.preventDefault();
            //console.log($(this).text());
        },
        select: function(event, ui) {
            //console.log($(this).text());
            event.preventDefault();
            //console.log($(this).text());
        }
    });
});​

вот скрипка

person simonlchilds    schedule 14.09.2012
comment
Я не думаю, что это проблема. Но спасибо, что нашли время - person arahant; 14.09.2012