时间戳

首页 > 解决方案 > 输入搜索 = 包括不断返回 Null

javascript - 输入搜索 = 包括不断返回 Null

问题描述

我正在尝试创建一个输入搜索来搜索从某个 API 获取的对象数组中的某些值...但是每次我使用它返回的 javascript 代码null

const search_input = document.querySelector('.input_search')
function searchCharacter() {
    fetch(api)
    .then(function(e){
        return e.json()
    })
    .then(function(data) {
        let characters = [];
        characters.push(...data) 
        search_input.addEventListener('keyup' , (e) => {
        const input_string = e.target.value
        const filterSearch =  characters.filter( e => {
               return  e.name.includes(input_string)

        })
        console.log(filterSearch)
    })    
})}
searchCharacter();

如果我用 e.short_name 或 e.shortnames[0] 切换 e.name 我工作得很好，但我需要该函数也查找名称，因为它们更具可读性这个数组结构的 img 在此处输入图像描述

编辑：问题已解决

const search_input = document.querySelector('.input_search')
function searchCharacter() {
    fetch(api)
    .then(function(e){
        return e.json()
    })
    .then(function(data) {
        // Creat Array and filter out the null objects.
        let characters = [];
        let characters_filter = [];
        characters.push(...data) 
        characters.filter( e => {
            if (e.name !== null) {
                characters_filter.push(e)
            } return
            })
            
            // creat input search event
            search_input.addEventListener('input' , (e) => {
                const input_string = e.target.value;
                const filter_array = characters_filter.filter( e => {
                    return e.name.toLowerCase().includes(input_string)
                })
                console.log(filter_array) 
            })
        }) 
    }
    
searchCharacter();

PS感谢大家为我指出正确的方向

标签： javascript

解决方案

我从您的问题中假设您的 input_string 在您的示例中是“哈希”？

这目前不适用于 e.name，因为它都是大写的，而您的搜索词是小写的。

const e = {
    name: "HASH",
};
const input_string = "hash";

console.log(e.name.toLowerCase().includes(input_string)); // returns true

根据您的 input_string 的定义方式，您可能也应该将其转换为小写。

推荐阅读