Question

我在Vue JS中做了一个基本的搜索过滤器，可以根据标题过滤一些博客文章。但是，这会引起一些有关用户如何搜索数组中每个字符串中存储的内容的问题。

例如，最佳做法是将字符串以小写形式写入数组吗？

如果不是必需的，那么当前当用户搜索“运动”时，什么也不会返回。但是，如果用户搜索“运动”，则会显示正确的结果。

因此，由于用户在使用搜索输入字段时不知道首字母大写，有没有办法避免区分大小写的搜索来避免此问题？

      <h1>Blog Search</h1>
      <input type="text" id="search" v-model="search" placeholder="Search blogs">
      <ul>
          <li v-for="blog in filteredBlogs">
             <h2>{{blog.title}}</h2>
          </li>
      </ul>

我的脚本如下

export default {
    data() {
        return {
            search:'',
            blogs: [
              { title: 'How to take photographs' },
              { title: 'Sports from around the world' }
            ]
        };
    },
    computed: {
        filteredBlogs: function(){
            return this.blogs.filter((blog) => {
                return blog.title.match(this.search);
            });
        }
    }
};

Answer 1

首先将对象标题转换为小写，然后将搜索文本转换为小写，然后进行搜索：

export default {
    data() {
        return {
            search:'',
            blogs: [
              { title: 'How to take photographs' },
              { title: 'Sports from around the world' }
            ]
        };
    },
    computed: {
        filteredBlogs: function(){
            return this.blogs.filter((blog) => {
                return blog.title.toLowerCase().match(this.search.toLowerCase());
            });
        }
    }
};

Answer 2

过滤器博客功能可以这样写

       filteredBlogs: function(){
            return this.blogs.filter((blog) => {
                return blog.title.toLowerCase().includes(this.search.toLowerCase())
            });
        }

基本的Vue JS搜索过滤器仅在数组中不区分大小写还是小写？

2 个答案: