Javascript 如何将autcomplete添加到下拉列表中，然后根据用户选择显示内容_Javascript_Jquery_Html_Wordpress

Javascript 如何将autcomplete添加到下拉列表中，然后根据用户选择显示内容

javascript jquery html wordpress

Javascript 如何将autcomplete添加到下拉列表中，然后根据用户选择显示内容,javascript,jquery,html,wordpress,Javascript,Jquery,Html,Wordpress,我正试图在我们的wordpress网站上实现一个自动完成下拉菜单。功能应如下所示：用户可以在其中开始键入的输入框中，一旦他们从列表中进行选择，就会显示特定的内容我已经通过返回与用户选择相关的内容的功能找到了答案。代码如下 <script> jQuery(function($){ $('.group').hide(); $('#option0').show(); $('#selectMe').change(function () { $('.group').

我正试图在我们的wordpress网站上实现一个自动完成下拉菜单。功能应如下所示：

用户可以在其中开始键入的输入框中，一旦他们从列表中进行选择，就会显示特定的内容

我已经通过返回与用户选择相关的内容的功能找到了答案。代码如下

<script>
  jQuery(function($){
  $('.group').hide();
  $('#option0').show();
  $('#selectMe').change(function () {
    $('.group').hide();
    $('#'+$(this).val()).show();
  })
});
</script>


<select id="selectMe" class=".dropdown">
  <option value="option0">Select Your Brand</option>
  <option value="option1">Brand A</option>
  <option value="option2">Brand B</option>
  <option value="option3">Brand C</option>
  <option value="option4">Brand D</option>
</select>

<div id="results">

<div id="option0" class="group">
Generic content as a placeholder until selection is made.
</div>

<div id="option1" class="group">
Content related to Brand A. 
</div>

<div id="option2" class="group">
Content related to Brand B.
</div>

<div id="option3" class="group">
Content related to Brand C.
</div>

<div id="option4" class="group">
Content related to Brand D.
</div>

</div>

我对任何类型的javascript或jquery都是全新的，我不知道如何使用它，这样他们就可以开始在输入字段中键入一个单词来显示可用的选项，而不是在下拉菜单中滚动一个长列表来查找他们要找的内容。下拉列表中将有200多个可能的选择

更新：我已经通过使用jquery自动完成ui找到了自动完成部分

    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    var availableTags = [
      "Burger King",
      "Chick-Fil-A",
      "Chipotle Mexican Grill",
      "Dunkin'",
      "McDonald's",
      "Panera Bread",
      "Sonic",
      "Subway",
      "Starbucks",
      "Wendy's"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  } );

  </script>
</head>
<body>

<div class="ui-widget">
  <label for="tags">Search your brand: </label><br><br>
  <input id="tags" placeholder="Start typing...">
</div>

  <div class="results">
  This is where I would want the content based on user selection to be shown.
  </div>

</body>
</html>

我浏览了autocomplete事件，但不明白应该在何处放置任何附加代码来显示与用户在另一个div中选择的内容相关的内容

任何与此编码的帮助将不胜感激

将为您处理自动完成部分。除非您有自己实现此逻辑的特定需求，否则我建议您使用自动完成小部件。jQueryUI不是唯一的一个…有很多可用的。听起来您可能正在寻找一种级联下拉效果，其中一个下拉列表中的选择决定了另一个下拉列表中可用的选项？如果是这种情况，请查看jQueryUIAutoComplete中的OnClose事件，并通过谷歌搜索级联下拉列表。非常感谢您的回复！我将查看自动完成小部件。。。我在研究中看到了这一点，但不确定它将如何实现，需要根据用户选择显示特定内容。就像我说的。。超级新来的！lol我不需要选择来确定另一个下拉列表中的其他选项，我只需要根据用户从一个下拉列表中选择的内容显示特定内容。希望这有助于澄清！根据用户选择显示特定内容与自动完成是一个独立的问题。实现自动完成，然后根据用户的选择处理显示的内容。来自JQuery UI自动完成的OnClose事件将对您有所帮助。我刚刚用您关于自动完成的建议更新了我的原始问题。从好的方面来说，那部分工作得很好。。另一方面，我不知道如何让第二部分工作。你能提供一个JSFIDLE来帮助你吗？将为您处理自动完成部分。除非您有自己实现此逻辑的特定需求，否则我建议您使用自动完成小部件。jQueryUI不是唯一的一个…有很多可用的。听起来您可能正在寻找一种级联下拉效果，其中一个下拉列表中的选择决定了另一个下拉列表中可用的选项？如果是这种情况，请查看jQueryUIAutoComplete中的OnClose事件，并通过谷歌搜索级联下拉列表。非常感谢您的回复！我将查看自动完成小部件。。。我在研究中看到了这一点，但不确定它将如何实现，需要根据用户选择显示特定内容。就像我说的。。超级新来的！lol我不需要选择来确定另一个下拉列表中的其他选项，我只需要根据用户从一个下拉列表中选择的内容显示特定内容。希望这有助于澄清！根据用户选择显示特定内容与自动完成是一个独立的问题。实现自动完成，然后根据用户的选择处理显示的内容。来自JQuery UI自动完成的OnClose事件将对您有所帮助。我刚刚用您关于自动完成的建议更新了我的原始问题。从好的方面来说，那部分工作得很好。。另一方面，我不知道如何让第二部分工作。你能提供一个JSFIDLE来帮助你吗？