使用JavaScript在搜索栏中的单词顺序

Question

说明。。我是VueJS和JavaScript的新手，我正在尝试设置搜索栏。到目前为止，它运行良好，但是我有一个问题。即使我在搜索栏中键入的单词顺序不正确，我也希望能够搜索对象的描述。

示例。 说明中的字符串为“ Gucci蓝色腰带”。如果输入“ Gucci blue”，由于说明中包含的字词顺序与此相同，因此会显示结果。因此，我想添加可以键入“ Gucci belt”的功能，然后显示“ Gucci blue belt”描述的项目。

我当前在VueJS计算部分中的代码

   filteredsortedobjects (){
    return this.sortedobjects.filter(object => {
      var Objectslist_n = object.name;
      var Objectslist_q = object.quantity;
      var Objectslist_c = object.category;
      var Objectslist_s = object.section;
      var Objectslist_d = object.description;
      var Objectslist_date = object.reception_date;
      var Input = this.searchQuery;

      /* Form arrays with all the information in the table */

      var Objectslist_nq = Objectslist_n.concat(Objectslist_q);
      var Objectslist_nqc = Objectslist_nq.concat(Objectslist_c);
      var Objectslist_nqcs = Objectslist_nqc.concat(Objectslist_s);
      var Objectslist_nqcsd = Objectslist_nqcs.concat(Objectslist_d);
      var Objectslist_nqcsddate = Objectslist_nqcsd.concat(Objectslist_date);

      /* Filtered variables */

      var F_Objectslist = RemoveAccents(Objectslist_nqcsddate.toLowerCase());
      var F_Input = RemoveAccents(this.searchQuery.toLowerCase());

      /* Function to remove accents */

      function RemoveAccents(str) {
        var accents    = 'ÀÁÂÃÄÅàáâãäåÒÓÔÕÕÖØòóôõöøÈÉÊËèéêëðÇçÐÌÍÎÏìíîïÙÚÛÜùúûüÑñŠšŸÿýŽž';
        var accentsOut = "AAAAAAaaaaaaOOOOOOOooooooEEEEeeeeeCcDIIIIiiiiUUUUuuuuNnSsYyyZz";
        str = str.split('');
        var strLen = str.length;
        var i, x;
        for (i = 0; i < strLen; i++) {
          if ((x = accents.indexOf(str[i])) != -1) {
            str[i] = accentsOut[x];
          }
        }
        return str.join('');
      };
      console.log(F_Objectslist);
      console.log(F_Input);
      return F_Objectslist.includes(F_Input)
    })
  }

我知道自从我进行测试以来，尚未使用去除重音符号的功能。

我尝试做的事情。我尝试设置变量F_Input （搜索栏中写的内容）和F_Objectslist （包含array.split（“”）以字符串形式表示商品的所有单词，例如名称，类别，部分，数量，描述和日期。这样，我就可以在控制台中为两个变量使用此格式的字符串数组[“ word”，“ word2”，...]。

从这一点来看，我不确定如何检查F_Input数组中的字符串是否全部存在于F_Objectslist的数组中，即使它们的顺序不同。

非常感谢您的光临！

Answer 1

将F_Input拆分到“”上，然后可以使用“ Array.prototype.map（）”以与现在相同的技术遍历F_Input个搜索词数组。

请注意，我已将所有这些链接在一起，并最终调用了.every()方法。最后一个表示每个map操作（搜索）都必须为真（或map操作的结果必须为一个数组，除了true之外什么都没有）；

const F_Objectslist = "this is search term, and this is term search".split(' ');
const F_Input = "search term";

let result = search(F_Objectslist, F_Input);
console.log(result);

let notFoundResult = search(F_Objectslist, "search dog");
console.log(notFoundResult);

function search(text, terms) {
  return terms.split(' ').map(term =>text.includes(term)).every(found=>found===true);
}

Answer 2

我认为您已经很接近了，我会这样处理

function searchString(input, match) {
  let is_a_match = true;

  const match_arr = match.split(' ');
  const input_arr = input.split(' ');

  input_arr.forEach(word => {
    if (match_arr.indexOf(word) === -1) {
        is_a_match = false;
    }
  });

  return is_a_match;
}

可以找到有效的小提琴here

Answer 3

这是我的答案。

我设法制作了一个响应迅速的搜索栏，用于搜索数组中的信息！如果有人对此感到好奇，这是代码！

page.vue内部计算

# coding=utf8
# the above tag defines encoding for this document and is for Python 2.x compatibility

import re

regex = r"(norm\.[0-9]+|conv\.[0-9]+)"

test_str = ("module.features.denseblock4.denselayer16.norm.2.running_mean\n"
    "module.features.denseblock4.denselayer16.norm.2.running_var\n"
    "module.features.denseblock4.denselayer16.conv.2121.running_mean\n"
    "module.features.denseblock4.denselayer16.conv.21341.running_var")

matches = re.finditer(regex, test_str, re.MULTILINE)

for matchNum, match in enumerate(matches, start=1):

    print ("Match {matchNum} was found at {start}-{end}: {match}".format(matchNum = matchNum, start = match.start(), end = match.end(), match = match.group()))

    for groupNum in range(0, len(match.groups())):
        groupNum = groupNum + 1

        print ("Group {groupNum} found at {start}-{end}: {group}".format(groupNum = groupNum, start = match.start(groupNum), end = match.end(groupNum), group = match.group(groupNum)))

# Note: for Python 2.7 compatibility, use ur"" to prefix the regex and u"" to prefix the test string and substitution.

我有一个带有v-model =“ searchQuery”属性的输入。另外，还有一个包含

的表

   filteredsortedobjects (){
    return this.sortedobjects.filter(object => {
      var Objectslist_n = "a" + object.name;
      var Objectslist_c = object.category;
      var Objectslist_s = object.section;
      var Objectslist_q = object.quantity;
      var Objectslist_d = object.description;
      var Objectslist_date = object.reception_date;
      var Input = this.searchQuery;

      /* Form arrays with all the information in the table */

      var Objectslist_nc = Objectslist_n + " " + Objectslist_c;
      var Objectslist_ncs = Objectslist_nc + " " + Objectslist_s;
      var Objectslist_ncsq = Objectslist_ncs + " " + Objectslist_q;
      var Objectslist_ncsqd = Objectslist_ncsq + " " + Objectslist_d;
      var Objectslist_ncsqddate = Objectslist_ncsqd + " " + Objectslist_date;

      /* Filtered variables */

      var F_Objectslist = RemoveAccents(Objectslist_ncsqddate.toLowerCase()).split(" ") + " ";
      var F_Input = RemoveAccents(this.searchQuery.toLowerCase()).split(" ");

      /* Function to remove accents */

      function RemoveAccents(str) {
        var accents    = 'ÀÁÂÃÄÅàáâãäåÒÓÔÕÕÖØòóôõöøÈÉÊËèéêëðÇçÐÌÍÎÏìíîïÙÚÛÜùúûüÑñŠšŸÿýŽž';
        var accentsOut = "AAAAAAaaaaaaOOOOOOOooooooEEEEeeeeeCcDIIIIiiiiUUUUuuuuNnSsYyyZz";
        str = str.split('');
        var strLen = str.length;
        var i, x;
        for (i = 0; i < strLen; i++) {
          if ((x = accents.indexOf(str[i])) != -1) {
            str[i] = accentsOut[x];
          }
        }
        return str.join('');
      };

      return F_Input.every(object => {
          if (F_Objectslist.indexOf(object) === -1) {
          }
          else {
            return F_Objectslist.indexOf(object)
          }
      })

    })
  }

object.something是使用

从JSON文件导入的

   <tr id="tr" v-for="object in filteredsortedobjects" v-bind:key="object.name">
    <td>
      <p>{{ object.name }}</p>
    </td>
    <td>
      <p>{{ object.category }}</p>
    </td>
    <td>
      <p>{{ object.section }}</p>
    </td>
    <td>
      <p>{{ object.quantity }}</p>
    </td>
    <td>
      <p>{{ object.description }}</p>
    </td>
    <td>
      <p>{{ object.reception_date }}</p>
    </td>
  </tr>

您可能必须在data（）部分设置一些数据信息

<script>
import objects from "./Database/Objects.json";
</script>