使用jQuery从输入模糊的下拉列表中选择项目

的方法如下：

首先，确保在HTML页面中引入了jQuery库文件。

<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>

在HTML中创建一个输入框和一个下拉列表。

<input type="text" id="input" placeholder="输入关键词">
<ul id="dropdown"></ul>

使用jQuery编写JavaScript代码来实现输入模糊匹配和下拉列表的显示。

$(document).ready(function() {
  // 监听输入框的键盘输入事件
  $('#input').on('input', function() {
    var keyword = $(this).val(); // 获取输入框的值
    $('#dropdown').empty(); // 清空下拉列表

    // 根据输入的关键词进行模糊匹配
    if (keyword !== '') {
      var matchedItems = []; // 存储匹配的项目

      // 在这里进行项目匹配的逻辑，可以使用Ajax请求后端接口获取匹配的项目数据

      // 假设匹配的项目数据为一个数组
      var items = ['项目1', '项目2', '项目3', '项目4'];

      // 遍历匹配的项目数据
      for (var i = 0; i < items.length; i++) {
        var item = items[i];

        // 如果项目名称包含关键词，则添加到下拉列表中
        if (item.indexOf(keyword) !== -1) {
          matchedItems.push(item);
        }
      }

      // 将匹配的项目添加到下拉列表中
      for (var j = 0; j < matchedItems.length; j++) {
        var listItem = $('<li>' + matchedItems[j] + '</li>');
        $('#dropdown').append(listItem);
      }

      // 显示下拉列表
      $('#dropdown').show();
    } else {
      // 输入框为空时隐藏下拉列表
      $('#dropdown').hide();
    }
  });

  // 监听下拉列表项的点击事件
  $('#dropdown').on('click', 'li', function() {
    var selectedItem = $(this).text(); // 获取点击的项目名称
    $('#input').val(selectedItem); // 将项目名称填充到输入框中
    $('#dropdown').hide(); // 隐藏下拉列表
  });
});

以上代码实现了一个简单的输入模糊匹配和下拉列表选择的功能。根据输入的关键词，匹配项目名称，并将匹配的项目显示在下拉列表中。用户可以通过点击下拉列表中的项目来选择项目，并将选择的项目名称填充到输入框中。

这个功能在许多Web应用中都有广泛的应用场景，例如搜索框的自动补全、标签选择器等。

腾讯云相关产品和产品介绍链接地址：