Question

我需要在列表中输入一些值的同时显示结果。

我已经使用下拉菜单完成了操作，但是某些用户可以通过在文本框中键入内容进行选择。我该怎么做？请帮助..：（

这是我的代码

HTML：

<div class="plusAppContainer">
 <ul id="result" class="dropdownContent" role="menu">
  <li>10.24.0</li>
  <li>10.24.1</li>
  <li>10.24.2</li>
  <li>10.24.3</li>
  <li>10.25.1</li>
  <li>10.27.1</li>
  <li>10.28.1</li>
  <li>11.0</li>
  <li>11.0.1</li>
 </ul>
<div class="selectPlusApp">
 <input type="text" class="autocomplete-input">
  <a tabindex="1" class="dropdownIcon custom-combobox-toggle" href="#" 
   role="button"></a>
 </div>

Jquery：

$('.plusAppContainer a').click(function () {
      $(".plusAppContainer").addClass('show');
      $(".selectPlusApp input").attr('tabindex', 1).focus();
      $(".selectPlusApp input").toggleClass('active');
      $(".plusAppContainer").find('.dropdownContent').slideDown(300);
    });

    $('.selectPlusApp').focusout(function () {
      $(".plusAppContainer").removeClass('show');
      $(".selectPlusApp input").removeClass('active');
      $(".plusAppContainer").find('.dropdownContent').fadeOut(300);
    });

    $('.dropdownContent').on("click", "li", function(e) {
      e.preventDefault();
      $(".selectPlusApp input").val($(this).text());
      $(".selectPlusApp input").attr('tabindex', 1).focus();
    });

Answer 1

使用Chosen Js。将列表项绑定为下拉列表的数据源。然后将其作为“选择的”下拉列表。

Answer 2

您可以尝试一下。如果您想在用户输入值时提出建议。

between/3

https://jsfiddle.net/w0rsxd7t/7/

自动完成输入框

2 个答案: