主动更新输入中的键up DOM，检查输入值是否作为值包含在对象数组的属性中

Question

我正在使用这个API: http://hp-api.herokuapp.com/api/characters，它返回一个对象数组。我的HTML中有一个输入有一个keyup事件监听器。

document.getElementById('search').addEventListener('keyup', filterWizards)

目标:我想主动搜索从API返回的对象数组，看看name或house属性值是否包含输入元素的文本。然后，我将过滤掉DOM，使其包含基于

类型的信息。例子:如果用户开始输入哈利波特;"哈尔……"我的程序将开始从对象数组中搜索每个对象，看看该对象是否包含"作为文字的一部分，从名称或房屋财产。或者他们想搜索像格兰芬多这样的房子，当他们开始输入格兰芬多时，我可以过滤对象数组，并选择在DOM上显示符合

条件的字符。 API返回的数据:

let characters = 'http://hp-api.herokuapp.com/api/characters';
fetch(characters)
    .then(res => res.json()) // parse response as JSON
    .then(data => {
        console.log(data);
    })
    .catch(err => {
        console.error(`error ${err}`)
    });

Answer 1

假设一个id为" input"的输入字段，您可以过滤结果以匹配输入字段的值:

<input id="input">
<script>
fetch(characters)
    .then(res => res.json()) // parse response as JSON
    .then(data => {
        console.log(data);
        let re = new RegExp(document.getElementById('input').value);
        let matches = data.filter(function(elmt){
            return elmt.name.match(re);
        });
        console.log(matches);
    })
    .catch(err => {
        console.error(`error ${err}`)
    });
</script>

Answer 2

我会这样做:

1. 在数据可用之前禁用搜索字段。
2. 用filter和toLowerCase()比较找到的搜索匹配填充datalist(因此har找到Harry Potter)。

const search = document.getElementById('search'), characters = document.getElementById('characters'); 
let searchList;
fetch('http://hp-api.herokuapp.com/api/characters')
    .then(res => res.json()) // parse response as JSON
    .then(data => {
        searchList = data;
        enableSeach(data);
        updateDatalist('');
    })
    .catch(err => {
        console.error(`error ${err}`)
    });
    
function enableSeach(data) {
  search.disabled = false;
  search.placeholder = 'Type to search';
  search.addEventListener('input', () => {
    updateDatalist(search.value);
  });
}
function updateDatalist(searchTerm) {
  characters.innerHTML = '';
  searchList.filter(char => char.name.toLowerCase().includes(searchTerm.toLowerCase())).forEach(({name}) => {
    let option = document.createElement('option');
    option.value = name;
    characters.append(option);
  })
}

<input id="search" type="search" placeholder="Fetching data..." disabled list="characters" autocomplete="false">
<datalist id="characters"></datalist>