JQuery.Автозаполнение.Событие Keydown в операторе switch - PullRequest
Новая
       20

JQuery.Автозаполнение.Событие Keydown в операторе switch

0 голосов
/ 28 марта 2012

У меня недостаточно знаний в JQuery, чтобы понять, где в приведенном ниже коде я ошибся.Я не уверен насчет обработчика .live.В любом случае, этот код останавливается на первом <li> с добавленным классом selected при событии нажатия клавиши.Я хочу, чтобы он проверял все <li> на каждой клавише.Спасибо за любые конструктивные комментарии.

  • предложить - поле ввода, при вводе ключа появляется список автозаполнения,
  • результат - <ul id='result'></ul>
  • выбран - <li> 'с

Сценарий: 

$('#suggest').live('keyup keydown', function(event) {
    var search = $('#suggest').val();
    $.post('search.php', {
        search: search
    }, function(data) {
        $('#dropdown').html(data);

        switch (event.which) {
        case 40:

            var found = 0;

            $('#result li').each(function() {
                if ($(this).attr("class") == "selected") {
                    found = 1;
                }
            });

            if (found == 1) {
                var sel = $("#result li[class='selected'");

                // check if this is a last element in the list
                // if so then add selected class to the first element in the list
                if (sel.next().text() == '') {
                    $("#result li:first").addClass("selected");
                } else {
                    sel.next().addClass('selected');
                    // remove class selected from previous item
                    sel.removeClass('selected');
                }
            } else {
                $("#result li:first").addClass("selected");
            }
            break;

        case 38:
            //bla-bla
            break;
        }
    });
});

Ответы [ 2 ]

1 голос
/ 28 марта 2012

Несколько заметок:

  1. Чтобы проверить, есть ли у элемента класс, никогда не используйте .attr("class") ==. Если элемент имеет более одного класса или атрибут плохо отформатирован, это никогда не будет совпадать. JQuery предоставляет .hasClass() только для этой цели. $(this).hasClass('selected')
  2. Вам не нужно перебирать каждый элемент с помощью .each(), чтобы увидеть, есть ли у него класс. Вы можете позвонить .hasClass() по всей группе.
  3. Аналогично, чтобы выбрать элемент с классом, используйте .myclass, а не [class="myclass"]. Это по тем же причинам, что и пункт № 1. var sel = $("#result li.selected");
  4. Чтобы увидеть, является ли элемент последним братом, не используйте sel.next().text() == ''. Это приведет к вызову text() для неопределенного объекта (потому что его нет). Вместо этого используйте .length, чтобы увидеть, есть ли / нет следующий объект: sel.next().length == 0
  5. Возможно, вам не нужно искать при нажатии клавиш вверх / вниз. Я бы поставил оператор if/then, чтобы делать вверх / вниз отдельно от поиска.
  6. Ваш код вверх и вниз будет очень похож. Вместо использования case для каждой клавиши используйте один и тот же код для обеих клавиш, но слегка измените его в зависимости от того, есть ли у вас повышение или понижение.
  7. Использование keyup и keydown приведет к тому, что ваши клавиши вверх / вниз сработают дважды, а это значит, что ваш пользователь сможет выполнять только 2 или более элементов одновременно. Либо просто используйте один, либо отвечайте только на один для кода вверх / вниз, используя if(event.type == 'keydown') {

Со всем этим, кажется, все работает нормально:

http://jsfiddle.net/wgQE5/2/

Есть ли какое-то другое поведение, которое вы хотели?

0 голосов
/ 28 марта 2012

Также вместо того, чтобы изобретать велосипед, вы можете просто проверить:

http://jqueryui.com/demos/autocomplete/

Или

http://www.devbridge.com/projects/autocomplete/jquery/

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

...