模型数据如何实现模糊搜索？

模型数据实现模糊搜索

• 示例描述与操作指南
• 示例效果展示
• 实现步骤

示例描述与操作指南

构件查询示例，是对当前模型的数据进行按需查找。可以筛选楼层，在指定楼层进行查找；可对某类构件进行查找；也可针对某个构件名称进行模糊查询。用户可以将完整代码直接下载下来后，将模型id和用户个人账户devcode替换上去，即可展示自有模型。

示例效果展示

实现步骤

第一步 搜索区的创建：在界面左侧创建搜索区域

// 创建左侧搜索框
const addTileandSearchBoard = (fileKey) => {
  var toolBarZK = $("#viewport");
  const toolContainer = $(" <div id='container'></div>");
  toolBarZK.append(toolContainer);
  $(toolContainer).append("<div id='descriptionContainer' style='display:none'> </div>")
  $(toolContainer).append("<div id='descriptionContainer2' style='display:none'> </div>")
  $("#descriptionContainer").append("<p id ='title1'>" + "对当前模型构件进行筛选，可以只选填部分参数。当前接口更多细节，请前往API页查看 " + "</p>");
  $("#descriptionContainer2").append("<p id ='title2'>" + "请输入构件名称，进行模糊查找，例如:门、窗户等 " + "</p>");
  $(toolContainer).append("<p id ='title' style='font-size:30px;margin-bottom: 21px;margin-left: 40px;'> " +
    "构件查询示例 " +
    "<i style='font-size:20px;cursor:pointer;'class='far fa-question-circle' onmousedown='showDescription()'></i>" +
    "</p>");
  const formContainer = $("<form id='formContainer' class='layui-form'></form>");
  $(toolContainer).append(formContainer);
  const formItem1 = $("<div class='layui-form-item'>" +
    "<label class='layui-form-label'>楼层</label>" +
    "<div class='layui-input-block'>" +
    "<select name='louceng' lay-filter='louceng' id='louceng' lay-search >" +
    "<option value='disable' id='disable'>数据获取中</option>" +
    " </select>" +
    " </div>" +
    "  </div>");
  const formItem2 = $("<div class='layui-form-item'>" +
    "<label class='layui-form-label'>构件类</label>" +
    "<div class='layui-input-block'>" +
    "<select name='goujianlei' lay-filter='goujianlei' id='goujianlei' lay-search  >" +
    "<option value='disable2' id='disable2'>数据获取中</option>" +
    "<option value=''>--</option>" +
    " </select>" +
    " </div>" +
    "  </div>");
  const formItem3 = $("  <div class='layui-form-item'>" +
    "    <label class='layui-form-label'>构件名称</label>" +
    "    <div class='layui-input-inline' style='width: 110px;position:absolute'>" +
    "      <input type='text' name='gjname' autocomplete='off' class='layui-input'>" +
    "    </div>" +
    "    <div class='layui-form-mid layui-word-aux' style='left: 210px;position: absolute'>" +
    "       <i style='font-size:20px;cursor:pointer;'class='far fa-question-circle' onmousedown='showDescription2()'></i>" +
    "     </div>" +
    "  </div>");
  const formItem4 = $("  <div class='layui-form-item'>" +
    "    <div class='layui-input-block'>" +
    "      <button id='searchButton' class='lyButton' disabled lay-submit lay-filter='beginSearch'>开始搜索</button>" +
    "    </div>" +
    "  </div>");

  $("#formContainer").append(formItem1);
  $("#formContainer").append(formItem2);
  $("#formContainer").append(formItem3);
  $("#formContainer").append(formItem4);

  layui.use('form', function () {
    form = layui.form;
    //监听提交
    form.on('submit(beginSearch)', function (data) {
      const info = data.field;
      updateMoelBySearchResult(fileKey, info.louceng, info.goujianlei, info.gjname);
      return false;   // 阻止表单跳转
    });

    form.on('select(louceng)', function (data) {
      updateComponentStyleByLevelId(data.value);
      return false; // 阻止表单跳转
    });
  });
}

第二步 更新楼层选项：根据数据接口获取模型空间树的楼层信息

//更新form的楼层信息
const updateLoucengInformation = (fileKey) => {
  // 利用[数据接口:获取模型对于的空间树的楼层信息] 将返回的数据更新表单的楼层信息
  getModelLoactionTree(fileKey).then((result) => {
    $("#disable").remove();
    const dataArray = result[0].childrenResultList[0].childrenResultList[0].childrenResultList;
    if (dataArray && dataArray.length !== 0) {
      dataArray.forEach(item => {
        if (item.type === "IFCBUILDINGSTOREY" && item.children.length > 0) {
          let obj = {};
          obj.name = item.name;
          obj.key = item.key;
          buildingLevel.push(obj);
        }
      });
    }
    if (buildingLevel.length !== 0) {
      buildingLevel.forEach((item1, index1) => {
        getLevelCompnentTypes(fileKey, item1.key).then(data => {
          if (data.code === 200) {
            if (data.data.length !== 0) {
              item1.componentTypes = data.data;
            }
          }
        });
      });
      $("#louceng").append("<option value=''>" + "--" + "</option>");
      buildingLevel.forEach((item, index) => {
        $("#louceng").append("<option value=" + item.key + ">" + item.name + "</option>");
      });
      if (form) form.render('select');
    } else {
      $("#louceng").append("<option value=''>" + "该模型无楼层信息" + "</option>");
    }
    $(".lyButton").removeAttr("disabled");
  })
}

第三步 更新构件类：根据选择的楼层信息更新构件类的值

// 根据楼层id更新构建类的option
const updateComponentStyleByLevelId = (levelid) => {
  $("#goujianlei").children("option").remove();
  $("#goujianlei").append("<option value=''>--</option>");
  if (levelid !== '') {
    const upArray = buildingLevel.filter(item => item.key === levelid)[0].componentTypes;
    const withoutUpcaseArray = filterAllCapsComponentTypes(upArray);
    withoutUpcaseArray.forEach(item => {
      $("#goujianlei").append("<option value=" + item + ">" + item + "</option>")
    })
  } else {
    comTypeArray.forEach((item, index) => {
      $("#goujianlei").append("<option value=" + item + ">" + item + "</option>");
    })
  }
  if (form) form.render('select');
}

下载完整代码

来源：https://blog.csdn.net/weixin_45544796/article/details/101022798