Javascript 根据输入更改的搜索条件筛选数组内容

我有一个搜索表单，它应该过滤与用户输入的值最接近的名称列表。 我一直都有值控制台日志记录，主要是基于事件筛选问题 如何将状态设置为事件过滤的已过滤状态

handleInputChange = event => {
  console.log("new value", event.target.value);
  if (event.target.name === "search") {
    const filteredList = this.state.results.filter(item => {
      return item.toLowerCase().indexOf(item.toLowerCase()) !== -1
    });
    this.setState({
      filteredResults: filteredList
    })
  }
}

我一直在使用我发现的这个例子

let fruits = ['apple', 'banana', 'grapes', 'mango', 'orange']

  * Filter array items based on search criteria (query)
 */
 function filterItems(arr, query) {
    return arr.filter(function(el) {
  return el.toLowerCase().indexOf(query.toLowerCase()) !== -1
 })
  }

 console.log(filterItems(fruits, 'ap'))  // ['apple', 'grapes']
 console.log(filterItems(fruits, 'an'))  // ['banana', 'mango', 'orange']

---

在onChange方法中传递函数。

我不是React开发人员，因此不太理解文章的正文，但下面是一个搜索数组的普通JS示例（添加注释以解释代码）：

//每次输入更改时都会调用此函数
函数navsearch（）{
var term=document.getElementById（'navsearch'）.value.toLowerCase（）
搜索（术语）//初始化搜索
}
函数搜索（术语）{
var i；
searchids=[]//将结果数组设置为空状态
//循环遍历数组中所有可能的结果
对于（i=0；resources.length>i；i++）{
//如果array items name对象包含搜索词，请将其ID添加到临时结果数组中
if（resources[i].name.includes（term）==true）{
searchids.push（资源[i].id）
}
}
console.log（searchID）
//初始化结果的显示
showsearchresults（）
}
函数showsearchresults（）{
var html=“”；
var i；
//通过数组循环保存结果
//然后，它将获得每个结果的名称并写入标记
对于（i=0；i
${resources[SearchID[i]].name}
`
}
//将结果放在html页面上
document.getElementById（'results'）。innerHTML=html
}
var searchids=[]；
//可能的结果
风险值资源=[{
id:0，
img:'img/twitter.png'，
名称：“推特”
}, {
id:1，
img:'img/discord.png'，
名称：“不和谐”
}, {
id:2，
img:'img/facebook.png'，
姓名：“facebook”
}, {
id:3，
img:'img/instagram.png'，
名称：“instagram”
}];

---

另外，在

什么是过滤状态以及您希望在哪个事件上获得过滤值？您能否详细说明问题所在？如果您想更改基于类的组件的状态，您将使用

this.setState

以及

item.toLowerCase（）.indexOf（item.toLowerCase（））

？这将始终等同于

0

已经获得了该部分，现在我只需要它来过滤我已呈现的名称表

// this function will be called every time the input changes
function navsearch() {
    var term = document.getElementById('navsearch').value.toLowerCase()
    search(term) // initialize the search
}

function search(term) {
    var i;
    searchids = [] // set the results array to an empty state

    // loop through all possible results in the array
    for (i = 0; resources.length > i; i++) {

        // if the array items name object includes the search term, add its ID to a temporary results array
        if (resources[i].name.includes(term) == true) {
            searchids.push(resources[i].id)
        }
    }

    console.log(searchids)

    // initialize the showing of the results
    showsearchresults()
}

function showsearchresults() {
    var html = "";
    var i;

    // loop through the array holding results 
    // this will then get the name and write markup for each result
    for (i = 0; i < searchids.length; i++) {
        var html = html + `
        <div class="icon" title="${resources[searchids[i]].name}">
            <table>
                <tbody>
                    <tr>
                        <td><img src="${resources[searchids[i]].img}"><br><br>${resources[searchids[i]].name}</td>
                    </tr>
                </tbody>
            </table>
        </div>`
    }

    // put the results on the html page
    document.getElementById('results').innerHTML = html
}

var searchids = [];

// possible results
var resources = [{
    id: 0,
    img: 'img/twitter.png',
    name: 'twitter'
}, {
    id: 1,
    img: 'img/discord.png',
    name: 'discord'
}, {
    id: 2,
    img: 'img/facebook.png',
    name: 'facebook'
}, {
    id: 3,
    img: 'img/instagram.png',
    name: 'instagram'
}];