JQuery автозаполнение не выбрать элемент - PullRequest
Новая
       4

JQuery автозаполнение не выбрать элемент

8 голосов
/ 31 мая 2011

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

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

Для этого, Я в опции "open" установил это: 

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>

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

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

Ошибка в 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

Ответы [ 2 ]

2 голосов
/ 28 июля 2011

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

1 голос
/ 03 августа 2011

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

...