layui实现地址下拉框模糊查询

layui实现地址下拉框模糊查询

HTML代码

注意：千万不要少 lay-search

<div class="layui-col-md4">
   <label class="layui-form-label"><em>*</em>始发地：</label>
   <div class="layui-input-block layui-form" lay-filter="OD_START_LAND">
       <select name="OD_START_LAND" id="OD_START_LAND" lay-filter="OD_START_LAND" lay-verify="required" lay-search>
           <option value="">请输入</option>
       </select>
   </div>
</div>

js代码

   selectLike({
            id: "OD_START_LAND",
            url: "/Basic/GetAreaDrop",
            paramKey: "name",
            currValue: startValue,//当前值,用于编辑时赋值或赋默认值
            pageSize: 30, //最大检索行数默认为10行
            option: {
                keyField: "ID",
                textField: "FULL_CNAME"
            },
            //keyCode: [32],
            timer: 500  //输入完成后自动触发检索的时间间隔(毫秒)
        });

selectLike的底层配置

function selectLike(obj) {
    var lastTimer = 0;
    //参数
    var oldValue = "";
    var pramas = { pageSize: obj.pageSize || 10 };
    //值为空时
    if (typeof obj.currValue === "undefined" || obj.currValue === null || obj.currValue === "") {
        pramas[obj.paramKey] = oldValue;
        form.render("select", obj.id);
        //$("#" + obj.id).next().find("input").unbind('keyup').on('keyup', function () {
        //    var val = (this.value || "").trim();
        //    inputKeyup(val);
        //});
        if (obj.keyCode && obj.keyCode.push) {
            //柑橘按键检索
            $("#" + obj.id).next().find("input").on('keydown', function () {
                var val = (this.value || "").trim();
                //配置查询键位,需用code判断
                var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
                if (obj.keyCode.indexOf(keyCode) >= 0) {
                    inputKeyup(val);
                    return false;
                }
            });
        } else {
            $("#" + obj.id).next().find("input").on('keyup', function () {
                var val = (this.value || "").trim();
                inputKeyup(val);
            });
        }
    } else {
        oldValue = obj.currValue;
        pramas[obj.paramKey] = oldValue;
        getData(pramas);
    }

    function inputKeyup(val) {
        //判断是否有timer,有,清除原有的timer,创建新的timer
        if (lastTimer != 0) clearTimeout(lastTimer);
        lastTimer = setTimeout(function () {
            if (val && val != oldValue) {
                oldValue = val;
                pramas[obj.paramKey] = oldValue;
                getData(pramas);
            }
        }, obj.timer || 200);
    }

    function getData(pramas) {
        $.ajax({
            type: "POST",
            url: obj.url,
            data: pramas,
            success: function (data) {
                //添加默认元素
                $("#" + obj.id).empty().append(new Option("", ""));
                $.each(data, function (index, item) {
                    if (item[obj.option.keyField] == obj.currValue)
                        $("#" + obj.id).append(new Option(item[obj.option.textField], item[obj.option.keyField], true, true));
                    else $("#" + obj.id).append(new Option(item[obj.option.textField], item[obj.option.keyField]));
                });
                var currValue = $("#" + obj.id).next().find("input").val();
                form.render("select", obj.id);
                //从新绑定事件
                //$("#" + obj.id).next().find("input").on('keyup', function () {
                //    var val = (this.value || "").trim();
                //    inputKeyup(val);
                //});
                if (obj.keyCode && obj.keyCode.push) {
                    $("#" + obj.id).next().find("input").on('keydown', function () {
                        var val = (this.value || "").trim();
                        //配置查询键位,需用code判断
                        var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
                        if (obj.keyCode.indexOf(keyCode) >= 0) {
                            inputKeyup(val);
                            return false;
                        }
                    });
                } else {
                    $("#" + obj.id).next().find("input").on('keyup', function () {
                        var val = (this.value || "").trim();
                        inputKeyup(val);
                    });
                }
                //input赋值
                if (typeof obj.currValue === "undefined" || obj.currValue === null) {
                    $("#" + obj.id).next().find("input").val(currValue);
                    $("#" + obj.id).next().find("input").trigger('click').trigger('focus');
                }
                obj.currValue = undefined;
            }
        });
    }
}

后端代码

控制器中

/// <summary>
/// 地区下拉框
/// </summary>
/// <param name="name"></param>
/// <param name="pageSize"></param>
/// <returns></returns>
[HttpPost]
public ActionResult GetAreaDrop(string name, int pageSize = 30)
{
    List<BasicArea> data = new BasicAreaService().GetAreaDrop(name, pageSize);
    return ContentJsonString(JsonConvert.SerializeObject(data));
}

service层

 public List<BasicArea> GetAreaDrop(string name, int pageSize)
 {
       string sql = @"SELECT ID, AREA_CODE ,FULL_CNAME  FROM BASIC_AREA where  FULL_CNAME is not null AND ISDEL='0' ";
       if (!string.IsNullOrEmpty(name))
       {
           name = name.Replace("'", "");
           sql += $" and (FULL_CNAME like '%{name}%' or  AREA_CODE='{name}' OR to_char(ID)='{name}')";
       }
       List<BasicArea> data = Db.SqlQueryable<BasicArea>(sql).ToList();
       return data;
   }

实现的效果图