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();
}
});
});
});