одна () функция jQuery убивает все

0

Я пытаюсь сделать список автозаполнения, как Google. Когда вы вводите что-то, он предложит несколько слов для вас, и когда вы нажмете кнопку down, элемент, на котором вы находитесь, станет синим.

Вот JSFiddle, который показывает проблему. Каждый раз, когда я нажимаю кнопку down, только один элемент должен быть синим, но здесь он не работает.

Что не так в этом коде?

$(".search").keydown(function(e) {
    if (e.keyCode == 40) {
        var attr = $("#showlist").find("li").attr("style");
        if (typeof attr !== 'undefined' && attr !== false){
            var stylist = $("#showlist").find("[style]");
            stylist.removeAttr("style");
            stylist.next().attr("style","background-color:blue");
        } else {
            $("#showlist li:first-child").attr("style", "background-color:blue");
        }
    }
})

Я попробовал one("keydown", function() {}) вместо функции keydown(function() {}) jQuery, но это не сработало. Что мне делать?

Теги:

4 ответа

2

Хорошо бы попытаться научиться делать это самостоятельно, но так как вы отметили свой вопрос с помощью jQuery, знаете ли вы, что есть плагин jQuery-UI, который обрабатывает автозаполнение? Он довольно прочен и может обрабатывать JSON и такие возвращаются из Ajax.

Вот демонстрационная страница для плагина, а вот документация.

Для иллюстрации здесь приведен код для очень простого примера, показанного на этой демонстрационной странице. Он заполняет элемент управления из жестко запрограммированного списка, что может быть маловероятным IRL.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  });
  </script>
</head>
<body>
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>
</body>
</html>

Ключевая роль в этом заключается в чрезвычайно простой проводке управления:

 $( "#tags" ).autocomplete({
      source: availableTags
    });

Даже если вы решите не использовать этот плагин, вы можете получить хорошую идею, прочитав базовый код, как сделать свой автозаполнение.

Я также отмечу, что может быть полезно знать, как вы googling, эта функция также часто называется "autosuggest".

2

Причина, по которой ваш код не работает, заключается в том, что эта строка повреждена.

var attr = $("#showlist").find("li").attr("style");

Он не может работать, так как find ("li") вернет массив с 4 li в нем. Вы должны добавить [style] в селектор, чтобы выбрать только тот, который установлен в стиле.

Мой JSFiddle после исправления этой строки: http://jsfiddle.net/Sn9V8/2/

Во всяком случае, я бы предложил вам две вещи:

  • Используйте классы вместо применения стиля каждый раз. Код будет выглядеть проще и проще.
  • Взгляните на плагины, упомянутые другими. У них отличные документы и поддержка со стороны сообщества, поэтому они ускорят ваше развитие.
  • 0
    Кажется, мы пришли к одному и тому же выводу одновременно :)
  • 0
    Хаха, ты прав :) Приятно видеть такой большой "трафик" на stackoverflow :)
1

Я предпочел бы полагаться на классы для этого вместо чтения встроенных стилей.

FIDDLE

var $items = $('#showlist li'),
    $selectedItem = $items.find('.selected'),
    lastIndex = $items.length - 1,
    selectedIndex = -1;

$(".search").keydown( function(e) {

    var key = e.which,
        down = key === 40;

    if (!down && key !== 38) return;

    selectedIndex += down? 1 : -1;

    if (selectedIndex < 0 || selectedIndex > lastIndex) 
        selectedIndex = down? 0 : lastIndex;

    $selectedItem.removeClass('selected');

    $selectedItem = $($items[selectedIndex]).addClass('selected');
});
1

В вашем коде у вас есть var attr = $("#showlist").find("li").attr("style");

attr всегда будет объектом jQuery, даже если он не найдет элемент. Поэтому в вашей следующей строке typeof attr !== 'undefined' всегда будет правдой.


См. " Сценарий" для быстрого обновления вашей проблемы.

$(".search").keydown(function (e) {

    // Up
    if (e.keyCode == 38) {
        var $active = $("#showlist li.active");

        if ($active.length){
            if ($active.prev('li').length)
               $active.removeClass('active').prev('li').addClass('active');
        }
        else 
            $("#showlist li:first-child").addClass('active');
    }

    // Down
    if (e.keyCode == 40) {
        var $active = $("#showlist li.active");

        if ($active.length){
            if ($active.next('li').length)
               $active.removeClass('active').next('li').addClass('active');
        }
        else 
            $("#showlist li:first-child").addClass('active');
    }
})

Ещё вопросы

Сообщество Overcoder
Наверх
Меню