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

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

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

$(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(); // 隐藏下拉列表
  });
});