jQuery为input标签实现下拉选项筛选和选中功能

最新推荐文章于 2025-04-15 17:55:57 发布

@Youngpine

最新推荐文章于 2025-04-15 17:55:57 发布

阅读量1.1k

点赞数 4

文章标签： jquery 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_43328524/article/details/138160984

版权

本文详细介绍了如何使用HTML和jQuery创建一个具有模糊搜索功能的下拉菜单，用户可以根据输入进行筛选并选择相应选项，同时包含关键的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

概要

这是一个为input标签实现下拉选项功能，且input中可使用模糊匹配，最后可以选中其中一个选项。

代码

这是完整的HTML代码实例，可直接网页显示。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Dropdown with Fuzzy Search and Selection</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <style>
      /* 样式用于保持下拉框的可见性和滚动 */
      .dropdown-container {
          position: relative;
          width: 200px;
      }

      .dropdown-search {
          width: 100%;
          padding: 5px;
          border: 1px solid #ccc;
          box-sizing: border-box;
      }

      .dropdown {
          display: none; /* 默认隐藏下拉框 */
          width: 100%;
          height: 150px; /* 控制下拉框高度 */
          overflow-y: auto; /* 支持滚动 */
          border: 1px solid #ccc;
          box-sizing: border-box;
          position: absolute;
          background-color: white;
          z-index: 1; /* 确保下拉框在最上层 */
      }

      .dropdown.show {
          display: block; /* 显示下拉框 */
      }

      .dropdown-option {
          padding: 5px;
          cursor: pointer;
      }

      .dropdown-option:hover {
          background-color: #f0f0f0; /* 鼠标悬停时改变背景颜色 */
      }
  </style>
</head>
<body>
<div class="dropdown-container">
  <!-- 搜索框 -->
  <input type="text" class="dropdown-search" id="search-input" placeholder="Search..." autocomplete="off">

  <!-- 下拉框 -->
  <div class="dropdown" id="dropdown">
    <div class="dropdown-option" data-value="apple">Apple</div>
    <div class="dropdown-option" data-value="banana">Banana</div>
    <div class="dropdown-option" data-value="orange">Orange</div>
    <div class="dropdown-option" data-value="grapes">Grapes</div>
    <div class="dropdown-option" data-value="watermelon">Watermelon</div>
    <div class="dropdown-option" data-value="blueberry">Blueberry</div>
  </div>
</div>

<script>
  // 监听搜索输入框的 keyup 事件
  $('#search-input').on('keyup', function() {
    var searchValue = $(this).val().toLowerCase(); // 获取搜索内容
    var dropdown = $('#dropdown'); // 下拉框

    // 显示下拉框
    dropdown.addClass('show');

    // 遍历下拉框的选项
    dropdown.find('.dropdown-option').each(function() {
      var optionText = $(this).text().toLowerCase(); // 获取选项文本

      if (optionText.includes(searchValue)) {
        $(this).show(); // 显示匹配的选项
      } else {
        $(this).hide(); // 隐藏不匹配的选项
      }
    });
  });

  // 监听选项的点击事件
  $('.dropdown-option').on('click', function() {
    var selectedValue = $(this).attr('data-value'); // 获取选项的值
    var selectedText = $(this).text(); // 获取选项的文本

    // 将选中的文本显示在搜索框中
    $('#search-input').val(selectedText);

    // 隐藏下拉框
    $('#dropdown').removeClass('show');
  });
</script>
</body>
</html>