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

您可以使用filter和includes

let arr = [{"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":"Toyota, Testing function", "state":"SA", "groupName":"AHG"}]

let selectedKey = 'car'
let selectedValue = 'Toyota'

let op = arr.filter(({[selectedKey]:key})=> key && key.includes(selectedValue))

console.log(op)

Answer 2

可以通过将正则表达式对象传递给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()结合使用，以仅获取car字段包含查询字符串的JSON项目：

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;
        });
    },
  }

})

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

2 个答案:

更新