时间戳

首页 > 解决方案 > 自动完成输入框

jquery - 自动完成输入框

问题描述

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

我已经通过使用下拉菜单完成了，但有些用户可以通过在文本框中键入来选择。我该怎么做？请帮忙.. ：（

这是我的代码

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>

查询：

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

标签： jquery

解决方案

使用选择的Js。将您的列表项绑定为下拉列表的数据源。然后将此归档为选择下拉。

推荐阅读