Автозаполнение jQuery не выбирает элемент

В опции «источник» я получаю с помощью ajax результаты + 1 настраиваемый текст заметки с информацией о возможных результатах. Нравится: «Показать 2 из 3456 результатов». Это всего лишь информация для пользователя.

Для последней записи в списке -ul- я бы не обработал следующие события: keyup, keydown, pageup и pagedown.

Для этого я в опции "открыть" установил следующее:

open: function(event, ui) {
$("ul.ui-autocomplete.ui-menu li:last").removeClass("ui-menu-item").removeAttr("role").html('Show 2 of 3456 results');
},

HTML теперь выглядит так:

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; top: 39px; left: 79px; display: block; width: 273px;">
<li class="ui-menu-item" role="menuitem">
    <a class="ui-corner-all" tabindex="-1">Result 1</a>
</li>
<li class="ui-menu-item" role="menuitem">
    <a class="ui-corner-all" tabindex="-1">Result 2</a>
</li>
<li class="">Show 2 of 3456 results</li>
</ul>

Это работает, если дает хотя бы один реальный результат, а не только текст последней заметки.

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

Ошибка в Firebug: item.offset () имеет значение null

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; top: 39px; left: 79px; display: block; width: 273px;">
<li class="">No Results</li>
</ul>

Что я могу сделать, чтобы добавить настраиваемый -li- в конец списка, который нельзя выбрать?

jQuery-UI 1.8.13


javascript jquery jquery-ui-autocomplete
person user706420    schedule 31.05.2011    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Я обнаружил, что этот виджет будет жаловаться, если ваши элементы li не содержат тега a. Я понимаю, что это делает его доступным для выбора, поэтому вам придется либо немного расширить класс для вашего случая, либо создать правило CSS, которое гарантирует, что li не получит выбранное состояние (что, я признаю, немного взломано)

person restlessdesign    schedule 28.07.2011
comment
Если хаки работают, я обычно называю их «гениальными кусочками недокументированного кода» :) - person Rob Quincey; 03.08.2011
comment
Пока ваш пользовательский li не имеет класса .ui-menu-item, он не должен вызывать событие выбора автозаполнения при нажатии. - person nickb; 20.12.2011

arrow_upward
1
arrow_downward

Вместо того, чтобы возиться с селекторами CSS, почему бы не привязаться к событиям select и change, чтобы проверить пользовательские данные, которые вы добавляете к объекту (доступные через аргумент ui.item для этих событий)? Вы получите что-то вроде этого:

$(function() {
    $("#acInput").autocomplete({
                                    source: availableTags,
                                    select: function(event, ui) { 
                                        // if it's your info item, then
                                        event.preventDefault(); 
                                    },
                                    change: function(event, ui) { 
                                        // if it's your info item, then
                                        event.preventDefault();
                                    }
                               });
});

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

person Josh Anderson    schedule 03.08.2011