前端jQuery和原生js 实现下拉框select模糊搜索功能总结

花开不败zy

已于 2023-05-11 19:47:17 修改

阅读量3.8k

点赞数

文章标签： javascript 前端 jquery

于 2023-05-11 19:41:30 首次发布

本文链接：https://blog.csdn.net/qq_38377304/article/details/130629050

版权

本文总结了两种实现下拉框select模糊搜索的方法，一是使用jQuery，包括HTML结构和jQuery插件代码；二是通过原生JavaScript进行实现。

摘要由CSDN通过智能技术生成

方法一： jQuery实现搜索

html 部分

<!DOCTYPE html>
<html lang="zh_cn">
  <head>
    <title>select.suggest</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Bootstrap -->
    <script src="./jquery.js" type="text/javascript"></script>
  </head>
  <body>
    <h2>Hello, world!</h2>
    <div>
      <div>
        <div>
          <input
            id="testInput"
            name="testInput"
            type="text"
            placeholder="请选择区划"
          />
          <input type="hidden" name="cityRegionCode" id="cityRegionCode" />
        </div>
      </div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <!-- Include all compiled plugins (below), or include individual files as needed -->
  </body>
  <script type="text/javascript">
    $("#testInput").val("省本级");
    $("#cityRegionCode").val("370001");
    var datasList = [
      {
     
        id: "1656",
        regionCode: "371723",
        regionName: "成武县",
        parentId: "1651",
        leaf: "1",
        status: null,
        parentRegionCode: null,
        parentRegionName: null,
      },
      {
     
        id: "1614",
        regionCode: "371325",
        regionName: "费县",
        parentId: "1605",
        leaf: "1",
        status: null,
        parentRegionCode: null,
        parentRegionName: null,
      },
      {
     
        id: "1529",
        regionCode: "370405",
        regionName: "台儿庄区",
        parentId: "1524",
        leaf: "1",
        status: null,
        parentRegionCode: null,
        parentRegionName: null,
      }
    ];
    // map遍历list
    console.log("---------map方法--------");
    var datas = datasList.map((item) => {
     
      return {
     
        ...item,
        text: item.regionName,
      };
    });
    var itemSelectFuntion = function () {
     
      console.log($("#testInput").val());
      console.log($("#cityRegionCode").val());
    };
    $.selectSuggest("testInput", datas, itemSelectFuntion);
  </script>
</html>

jquery.select.js部分

(function ($) {
   
  $.selectSuggest = function (target, data, itemSelectFunction) {
   
    // console.log('target', target, data, itemSelectFunction)
    var defaulOption = {
   
      suggestMaxHeight: '280px',//弹出框最大高度
      itemColor: '#000000',//默认字体颜色
      itemBackgroundColor: 'RGB(255,255,255)',//默认背景颜色
      itemOverColor: '#ffffff',//选中字体颜色
      itemOverBackgroundColor: '#1b84e3',//选中背景颜色
      itemPadding: 4,//item间距
      fontSize: 14,//默认字体大小
      alwaysShowALL: true //点击input是否展示所有可选项
    };
    var maxFontNumber = 0;//最大字数
    var currentItem;
    var suggestContainerId =