React bootstrap autosuggest突出显示多个项目

Question

我正在使用React Bootstrap Autosuggest非常好的完整工具，但我的ItemAdapter有问题，我想从我的项目中的不同属性中搜索：名称，城市，州，国家。

在您输入城市州或国家/地区的全名之前一切正常，例如它会选择country =“España”的所有项目，选择项目时，唯一的项目对我来说很好，但不是在有多个项目具有相同的国家或州。

有人可以帮助我吗？

这是我的项目适配器：

class RepoAdapter extends ItemAdapter {
    getTextRepresentations(item) {
        return [
            (item.Name || "").toLowerCase(),
            (item.City || "").toLowerCase(),
            (item.State || "").toLowerCase(),
            (item.Country || "").toLowerCase(),
            (item.CelebratedBy || "").toLowerCase()];
      }
    sortItems(items) {
      return items; 
    }
    renderItem(item) {
      return <div>
            <h4>{item.Name}</h4>
            <div>
                {item.Address1 ? item.Address1 + ", " : ""} 
                {item.City ? item.City + ", " : ""} 
                {item.State ? item.State + ", " : ""} 
                {item.Country} 
            </div>
        </div>
    }
}

（顺便说一句，我尝试使用建议的rbs-autosuggest标签，但它不允许我，因为它是一个新的标签，我在SO中没有足够的“声誉”。

Answer 1

我的部分解决方案是将字段连接成一个字符串，这并不完美，因为我不能以不同的顺序添加多个单词，如果我以后再回来以更好的方式解决这个问题，我可以用它来解决这个问题。我会更新我的答案。

getTextRepresentations(item) {
    return [
        (item.Name || "").toLowerCase() +
        (item.City || "").toLowerCase() +
        (item.State || "").toLowerCase() +
        (item.Country || "").toLowerCase() +
        (item.CelebratedBy || "").toLowerCase()];
  }