用于搜索值的 Vue 和 Javascript API/对象/数组操作

Question

编辑澄清：我有一个来自 API 响应的对象，我使用挂载函数获得，数据已保存但尚未显示。我需要能够通过允许用户在页面上显示之前在输入框中输入文本来过滤该数据，然后找到该关键字在特定键值（名称）中的使用位置。然后在页面上显示结果，但包括 api 数组中的其他键/值对。这是 api 响应的样子：

    class: (...)
facets: (...)
numberFound: (...)
results: Array(202)
[0 … 99]
0:
class: "SearchResult"
contentGuid: "7f19462f-6c25-43a9-bdb5-479f5f42fbde"
dateUpdated: "2018-03-27T16:46:31Z"
description: "Converting a Word Document to Adobe Acrobat PDF   Learning Services  Converting a Word Document to Adobe   Acrobat PDF  Enterprise      Converting a Word Document to Adobe Acrobat PDF / Reference ..."
document: Object
documentGuid: "035f5c69-d406-4c16-86ca-de12773a0963"
documentId: 154424
documentVersionId: 44043
fileId: 74213
format: "PDF"
id: "Document#1#44043"
isFavorite: false
languages: "English"
name: "Converting a Word Document to Adobe Acrobat PDF"
numberOfIndexedCoobs: 0
numberOfSharedLinks: 1
packageType: "PDF"
previewId: 74213
publicLinkTokens: Array(1)
resourceType: "Other"
score: 0.0054571675
snippets: Object
updatedById: 994
updatedByName: "Michael"
versionName: "3"

例如，如果有人在搜索框中输入“Adobe”，我需要在整个对象的名称值中搜索“adobe”一词，并且只显示名称中某处带有“abobe”的那些价值。

我的想法是让文档名称拆分它，然后执行包含（）来检查搜索词。这可行，但我似乎无法弄清楚如何让它们一起工作并在屏幕上显示结果，以及获取其他信息，例如原始结果中的文档 ID。这是我目前所拥有的：

async getResults() {
      return axios
        .get(this.url, {
          headers: {
            "Content-Type": "application/json",
            "Bravais-prod-us-Context": this.getCookie(),
          },
        })
        .then((res) => {
          this.search = res.data;
          this.search.results.forEach((doc) => {
            this.results = doc.document.name
              .toLowerCase()
              .split(" ")
              .includes(this.termSearch.toLowerCase());
            console.log(doc.document.name.split(" "));
            console.log(this.results);
          });
        })

        .catch((error) => console.log(error));
    },

我需要显示原始标题（一些单词和首字母缩写词大写）加上文档 ID（用于 url 链接）和描述，所有这些信息都在初始 api 响应中。

<div v-for="" v-bind:key="">
      {{ ???? }}
    </div>

这在控制台中有效，但我如何将它重新组合在一起并在屏幕上？感谢任何帮助，而不是寻找其他人来做我的编码，只需要一些建议。

Answer 1

我会从你的逻辑开始。目前，您有一个函数可以进行 api 调用，然后搜索结果。更适合在单独的方法中调用 api，这样如果用户多次搜索，它就不会每次都调用 api。我们可以通过添加一个额外的方法来轻松解决这个问题，该方法检查结果对象是否已填充并决定调用哪些方法。

将所有字符串转换为小写是标准化数据的好主意。可能还有其他方法，但这适用于它的预期目的。但是，拆分字符串是不必要的，因为includes() 方法会搜索整个字符串。 See the MDN docs for String.prototype.includes()

要在数组中搜索，您可以使用filter() 方法，该方法将创建一个包含所有通过实施测试的元素的新数组。 See the MDN docs for Array.prototype.filter().

有了这个，我们可以把我们的逻辑写成：

async handleSearch(searchString) {
  if (!this.results.length) {
    this.getResults()
  }
  this.searchResults(searchString)
},

async getResults() {
  return axios.get(this.url, {
      headers: {
        "Content-Type": "application/json",
        "Bravais-prod-us-Context": this.getCookie(),
      },
    }).then((res) => {
      this.results = res.data.results
    }).catch((error) => console.error(error));
},
  
searchResults(searchString) {
  this.filteredResults = this.results.filter(item => {
    let name = item.name.toLowerCase();
    let searchTerm = searchString.toLowerCase();
    return this.name.includes(searchTerm)
  })
}

你的输入框会调用handleSearch()方法，然后你就可以这样写html了：

<div v-for="result in filteredResults" :key="result.id">
  <p>Name: {{result.name}}</p>
  <p>Description: {{result.description}}</p>
</div>