Question

在反应中我有一个看起来像

的物体

make_unique

我需要在那里搜索用户正在输入的元素（我从输入字段中获取它）。在用户写的每封信之后，我需要将它与所有名称进行比较，并找到该部分的所有名称

Answer 1

您想使用filter()和includes()

＆＃13;

let a = [{
    name: 'Congo',
    code: 'CG'
  },
  {
    name: 'France',
    code: 'FR'
  }
];

document.getElementById('foo').addEventListener('keyup', e => {
  let val = e.target.value.toLowerCase();
  let matches = a.filter(v => v.name.toLowerCase().includes(val));
  console.log(matches);
});

＆＃13;

<input id="foo">

＆＃13;

Answer 2

根据搜索字符串过滤内容，如

var data = [{name: 'Comoros', code: 'KM'}, {name: 'Congo', code: 'CG'}, {name: 'Congo, The Democratic Republic of the', code: 'CD'}, {name: 'Cook Islands', code: 'CK'}, {name: 'Costa Rica', code: 'CR'}, {name: 'Cote D\'Ivoire', code: 'CI'}, {name: 'Croatia', code: 'HR'}, {name: 'Cuba', code: 'CU'}, {name: 'Cyprus', code: 'CY'}]

var search = 'om';
var filterData = data.filter(item => item.name.includes(search));
console.log(filterData);

Answer 3

假设您不小心使用花括号{}代替括号[]来表示问题中的数组，并假设您可以使用ES6功能，则可以使用Array.prototype.filter()和{{ 3}}：

// countries = your array
// Assuming you put the user input in a state variable called this.state.search = the user input string
var matchingCountries = countries.filter(element => element.name.includes(this.state.search));

如果您在组件的render函数中使用它，并在某处呈现生成的matchingCountries数组，则会在更新this.state.search时对组件进行被动更新。 / p>

Answer 4

我冒昧地纠正了您的数据类型：

data = [{name: 'Congo', code: 'CG'}, ...]

因为您提供的版本只会抛出错误。

var data = [{name: 'Congo', code: 'CG'}];

...

handleKeyPress = (event) => {
    var value = this.event.target.value.toLowerCase(),
        matches = data.filter(function (item) {
            return item.name.substring(0, value.length).toLowerCase() === value;
        });

    console.log(matches)
}
render: function(){
     return(
         <div>
           <input type="text" onKeyPress={this.handleKeyPress} />
        </div>
     );
}

很抱歉，我的反应能力确实低于标准，所以有可能比event.target.value更好地获取输入值。

搜索对象反应

4 个答案: