javascript - 如何搜索具有多个值的单个单元格

Question

我正在尝试搜索 JSON。现在它以完全匹配的方式运行。我想将多个数据添加到一个单元格 - 它看起来像这样:“data, data2, nope, nope2”。如果用户搜索“数据”，则需要匹配数据和数据 2。

这是 json:

[
{"car":"Mercedes, Toyota, KIA", "state":"SA", "groupName":"AHG"},
{"car":"BMW","state":"NSW","groupName":"Brighton BMW"},
{"car":"Tesla","state":"VIC","groupName":"JAMES F"},
{"car":"Audi","state":"WA","groupName":"Audi CBD","groupPhone":"1300 04"},
{"car":"Mercedes","state":"SA","groupName":"AHG","groupPhone":"1300 05"}
]

例如第一个字符串 - "car":"Mercedes, Toyota, KIA"如果用户搜索 Toyota，我需要返回结果。现在它仅在字符串仅为 "car":"Toyota"时才有效

var app = new Vue({
    el: '#app',
    data: {
        addCar: false,
        cars: [],
        loading: false,
        searchCar: "",
        searchState: ""
    },
    methods: {
        search: function () {
            app.loading = true;
            var searchQuery = {
                car: encodeURIComponent(app.searchCar)
            };
            if (app.searchState) {
                searchQuery.state = app.searchState;
            };
            Sheetsu.read("https://sheetsu.com/apis/v1.0su/a4d7192e71fd", {
                search: searchQuery
            }).then(function (data) {
                console.log(data);
                app.cars = data;
                app.loading = false;
            },
                function (err) {
                    console.log(err);
                    app.cars = [];
                    app.loading = false;
                });
        },
        
         
        
    }

})

如果用户可以搜索 Toyota 并获得包含 Toyota 作为汽车的任何字符串的结果，那就太棒了 :)

Answer 1

可以通过将正则表达式对象传递给 String#match 方法来实现简单的客户端搜索，其中正则表达式的模式是您的查询/搜索字符串:

/* Returns non-null result is "query" matches any part of item.car string */
return item.car.match(new RegExp(query, "gi"))   

您可以将其与 Array#filter() 结合使用，以便仅获取 JSON 中 car 字段包含查询字符串的项目:

const json = [
{"car":"Mercedes, Toyota, KIA", "state":"SA", "groupName":"AHG"},
{"car":"BMW","state":"NSW","groupName":"Brighton BMW"},
{"car":"Tesla","state":"VIC","groupName":"JAMES F"},
{"car":"Audi","state":"WA","groupName":"Audi CBD","groupPhone":"1300 04"},
{"car":"Mercedes","state":"SA","groupName":"AHG","groupPhone":"1300 05"}
]

const findItem = (data, query) => {

  return data.filter(item => {
    
    return item.car.match(new RegExp(query, "gi"))    
  });
}

console.log("Search for Toyota", findItem(json, "Toyota"));
console.log("Search for Mercedes", findItem(json, "Mercedes"));
console.log("Search for Tesla", findItem(json, "Tesla"));
console.log("Search for Honda", findItem(json, "Honda"));

更新

要将上面显示的代码片段与您的 Vue 组件集成，试试这个:

var app = new Vue({
  el: '#app',
  data: {
    addCar: false,
    cars: [],
    loading: false,
    searchCar: "",
    searchState: ""
  },
  methods: {
    search: function() {
      app.loading = true;
      var searchQuery = {
        car: encodeURIComponent(app.searchCar)
      };
      if (app.searchState) {
        searchQuery.state = app.searchState;
      };
      Sheetsu.read("https://sheetsu.com/apis/v1.0su/a4d7192e71fd", {
        search: searchQuery
      }).then(function(data) {

          /*
          Add code here
          */
          data = data.filter(item => {
            return item.car.match(new RegExp(app.searchCar, "gi"))
          });

          app.cars = data;
          app.loading = false;
        },
        function(err) {
          console.log(err);
          app.cars = [];
          app.loading = false;
        });
    },
  }

})