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()];
  }