Javascript jQuery的一个（）函数可以杀死一切_Javascript_Jquery

Javascript jQuery的一个（）函数可以杀死一切

javascript jquery

Javascript jQuery的一个（）函数可以杀死一切,javascript,jquery,Javascript,Jquery,我正试图像谷歌一样制作一个自动完成列表。当你输入一些东西时，它会为你提示一些单词，当你按下向下按钮时，你所在的元素会变成蓝色下面是一个说明问题的例子。每次，当我按下向下按钮时，只有一个元素必须是蓝色的，但在这里它不工作这个代码有什么问题 $(".search").keydown(function(e) { if (e.keyCode == 40) { var attr = $("#showlist").find("li").attr("style");

我正试图像谷歌一样制作一个自动完成列表。当你输入一些东西时，它会为你提示一些单词，当你按下向下按钮时，你所在的元素会变成蓝色

下面是一个说明问题的例子。每次，当我按下向下按钮时，只有一个元素必须是蓝色的，但在这里它不工作

这个代码有什么问题

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

我尝试了onekeydown函数{}而不是jQuery的keydown函数{}，但是没有成功。我应该怎么做？

自己尝试学习如何做是件好事，但是既然你用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>

即使您选择不使用该插件，您也可能从阅读如何执行自动完成的底层代码中得到一个好主意

我还将注意到，当您在谷歌上搜索时，了解这一点可能会有所帮助，这一功能通常也被称为自动建议。

尝试自己学习如何做到这一点是很好的，但是既然您用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>

即使您选择不使用该插件，您也可能从阅读如何执行自动完成的底层代码中得到一个好主意

我还将注意到，当您在谷歌上搜索时，了解这一点可能会有所帮助，这一功能通常也被称为autosuggest。

您的代码无法工作的原因是因为此行已损坏

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

它无法工作，因为findli将返回一个包含4 li的数组。您应该将[style]添加到选择器中，以仅选择具有样式集的样式

我的JSFIDLE在修复该行后：

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

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

代码无法工作的原因是因为此行已损坏

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

它无法工作，因为findli将返回一个包含4 li的数组。您应该将[style]添加到选择器中，以仅选择具有样式集的样式

我的JSFIDLE在修复该行后：

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

使用类，而不是每次都应用样式。代码看起来更简单、更简单。看看其他人提到的插件。他们有很好的文档和来自社区的支持，因此他们将加快您的发展。在您的代码中，var attr=$showlist.findli.attrstyle

attr将始终是jQuery对象，即使它找不到元素。所以在你的下一行attr！='“未定义”将始终为真

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

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

在您的代码中，var attr=$showlist.findli.attrstyle

attr将始终是jQuery对象，即使它找不到元素。所以在你的下一行attr！='“未定义”将始终为真

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

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

我宁愿依靠类来实现这一点，而不是阅读内联样式

似乎我们在同一时间得出了相同的结论：哈哈，你是对的：很高兴看到stackoverflow上有这么大的流量：似乎我们在同一时间得出了相同的结论：哈哈，你是对的：很高兴看到stackoverflow上有这么大的流量：