前端实现汉字模糊匹配

2023-12-26 11:07:50
<!DOCTYPE html>
<html>
<head>
  <title>Vue汉字模糊搜索</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <input type="text" v-model="searchKeyword" placeholder="请输入搜索关键词">
    <ul>
      <li v-for="item in filteredData" :key="item">{{ item }}</li>
    </ul>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        searchKeyword: '', // 搜索关键词
        data: [
          "苹果",
          "香蕉",
          "蓝莓",
          "樱桃",
          "葡萄",
          "柠檬",
          "橙子",
          "草莓"
        ]
      },
      computed: {
        filteredData() {
          const keyword = this.searchKeyword.trim(); // 去除首尾空格

          if (keyword) {
            const regex = new RegExp(keyword, 'i'); // 不区分大小写
            return this.data.filter(item => regex.test(item));
          } else {
            return this.data;
          }
        }
      }
    });
  </script>
</body>
</html>

文章来源:https://blog.csdn.net/LRQQHM/article/details/135215052
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。