layuiは選択ボックス検索(ドロップダウン検索)の機能を実現します。

1. 公式が紹介しているフォームのドロップダウン検索に適した方法を使用できます。外側のレイヤーはlayui-formスタイルを使用し、selectタグにlay-search=""を追加する必要があります。 . この方法は外層にlayui-formを追加しないと実現できません 検索機能は次のとおりです: ここに画像の説明を挿入
2. 以下はドロップダウン選択の別の形式で、効果図は次のとおりです。
ここに画像の説明を挿入

HTML コードは次のようになります。

<div class="layui-inline">
    <input id="inpProductNumber" name="inpProductNumber" placeholder="请选择.." type="text" lay-verify="required"
      autocomplete="off" class="layui-input text-item" value="" />
    <dl class="layui-anim layui-anim-upbit layui-hide">
      <dd lay-value="" class="layui-select-tips">请选择..</dd>
      <dd lay-value="GH100">GH100</dd>
      <dd lay-value="GH200">GH200</dd>
      <dd lay-value="GH300">GH300</dd>
    </dl>
  </div>

js コードは次のようになります。

$('.text-item').each(function () {
    
    
      var _this = $(this);
      var pdiv = _this.parent();

      var inpTitle = $('<div class=\"layui-select-title\"></div>');
      inpTitle.append(_this);
      inpTitle.append('<i class=\"layui-edge\"></i>');

      var inpDl = pdiv.find("dl");
      var inpText = $('<div class=\"layui-form-select  \"></div>')
      inpText.append(inpTitle);
      inpText.append(inpDl);
      inpDl.removeClass("layui-hide");

      inpDl.find("dd").click(function () {
    
    
        var ddthis = $(this);
        inpDl.find("dd").removeClass("layui-this");
        ddthis.addClass("layui-this");
        let val = ddthis.attr("lay-value");
        _this.val(val);
      });

      inpTitle.click(function () {
    
    
        $(".layui-form-selected").removeClass("layui-form-selected layui-form-selectup");
        inpText.addClass("layui-form-selected");
      });

      pdiv.html(inpText);

      _this.keyup(function () {
    
    
        inpDl.find("dd").removeClass("layui-this");
        inpDl.find("dd").each(function () {
    
    
          var dthis = $(this);
          let inpVal = _this.val().toUpperCase();
          let val = dthis.attr("lay-value").toUpperCase();
          if (val.indexOf(inpVal) != -1) {
    
    
            dthis.show();
          } else {
    
    
            dthis.hide();
          }
        });
      });

    });

おすすめ

転載: blog.csdn.net/Hyanl/article/details/131457985