Question

我正在尝试制作像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");
        }
    }
})

我尝试了jQuery的one("keydown", function() {})而不是keydown(function() {})功能，但它没有用。我该怎么办？

Answer 1

尝试自己学习如何做到这一点很好，但是既然你用jQuery标记了你的问题，你知道有一个jQuery-UI插件可以处理自动完成吗？它非常强大，可以处理从Ajax返回的JSON等。

此处为插件的demo page，此处为documentation。

为了便于说明，这里是该演示页面上显示的非常简单的示例的代码。它从硬编码列表中填充控件，这可能不太可能是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
    });

即使您选择不使用该插件，也可以通过阅读有关如何进行自动填充的基础代码来获得一个好主意。

我还会注意到，当你在谷歌上搜索时，这个功能通常也被称为＆＃34; autosuggest＆＃34;。

Answer 2

您的代码无效的原因是此行已损坏。

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

它无法正常工作（＆＃34; li＆＃34;）将返回一个包含4 li的数组。您应该将[style]添加到选择器以仅选择具有样式集的那个。

修复该行之后的我的JSFiddle： http://jsfiddle.net/Sn9V8/2/

无论如何，我建议你做两件事：

每次都使用类而不是应用样式。代码看起来更简单，更简单。
看看其他人提到的插件。他们拥有出色的文档和社区支持，因此他们将加快您的发展。

Answer 3

在您的代码中，var attr = $("#showlist").find("li").attr("style");

attr将始终是一个jQuery对象，即使它没有找到该元素。所以在你的下一行typeof attr !== 'undefined'将永远是真的。

有关您的问题的快速更新，请参阅Fiddle。

$(".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');
    }
})

Answer 4

我宁愿依赖类而不是阅读内联样式。

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');
});

jQuery的one（）函数杀死了所有东西

4 个答案: