当前位置：首页 > article >正文

较为完善的搜索函数

article 2025/3/19 13:46:16

一.搜索函数的使用

在当代web制作中，多条件搜索不论是在后台系统或者说移动端都极为常见，其中最常见的莫过于在后台系统中的多条件搜索，根据后台庞杂的数据，我们往往需要一个好用的搜索函数来帮助我们进行多条件搜索

1.当执行多条件搜索的时候，我使用的是filter封装的函数，封装函数的代码可以提升我们代码的可读性以及可复用性，同时封装的越好，使用起来越简便，以下是我封装的一个利用filter封装的多条件搜索函数，同时也注意了对空值的处理

function multiConditionSearch(data, conditions) {
  // 根据sessionStorage中的change_id来选择不同的数据源
 
    data = globalData;
  // 取消所有复选框的选中状态
  $(".notice_nav .checkbox_id input").prop("checked", false);

  // 辅助函数，用于获取嵌套对象的值
  function getNestedValue(obj, path) {
    const parts = path.split(".");
    return parts.reduce((current, key) => {
      return current && current[key] !== undefined ? current[key] : null;
    }, obj);
  }

  // 过滤掉无效的条件
  const validConditions = Object.fromEntries(
    Object.entries(conditions).filter(([_, value]) => {
      if (typeof value === "object" && !Array.isArray(value)) {
        if ("like" in value) {
          return value.like.trim() !== "";
        } else if ("start" in value && "end" in value) {
          return value.start.trim() !== "" || value.end.trim() !== "";
        }
      }
      return (
        value !== null && value !== undefined && String(value).trim() 
!== ""
      );
    })
  );

  // 根据有效条件过滤数据
  const searchResult = data.filter((item) => {
    return Object.keys(validConditions).every((key) => {
      const condition = validConditions[key];
      // 获取嵌套属性的值
      const itemValue = getNestedValue(item, key);

      if (typeof condition === "object" && !Array.isArray(condition)) {
        if (condition.start && condition.end) {
          const itemTime = new Date(itemValue).getTime();
          const startTime = new Date(condition.start).getTime();
          const endTime = new Date(condition.end).getTime();
          return itemTime >= startTime && itemTime <= endTime;
        } else if (condition.like) {
          if (typeof itemValue === "string") {
            return itemValue
              .toLowerCase()
              .includes(condition.like.toLowerCase());
          }
          return false;
        }
      } else {
        return itemValue === condition;
      }
    });
  });

  // 调用 render 函数进行数据渲染
  page = 0;
  
    render(searchResult);
  return searchResult;}

2.该函数可以放在公共界面，在其他页面调用

conditions = {
      name: { like: $("#drug_name").val() },

      create_time: { start: $("#start_date").val(), end: $("#end_date").val() },
    };
    data = multiConditionSearch(data, conditions);

3.在页面上调用仅仅需要设置不同的类名用以匹配对应的数据即可，后续的赋值则是确保分页在点击的时候可以获取到正确的数据，而不是错误的全局数据，同时我的函数也可以处理嵌套的数据，关键函数即

// 辅助函数，用于获取嵌套对象的值
  function getNestedValue(obj, path) {
    const parts = path.split(".");
    return parts.reduce((current, key) => {
      return current && current[key] !== undefined ? current[key] : null;
    }, obj);
  }

4.用于提取嵌套的数据格式，类似于

const obj = {
  a: {
    b: {
      c: "Hello, World!"
    }
  }
};

// 使用 getNestedValue 获取值
const result1 = getNestedValue(obj, "a.b.c");
console.log(result1);  // 输出: "Hello, World!"

// 路径无效的示例
const result2 = getNestedValue(obj, "a.x.y");
console.log(result2);  // 输出: null

// 路径部分为 null 或 undefined 的示例
const result3 = getNestedValue(obj, "a.b.c.d");
console.log(result3);  // 输出: null