js 输入框输入条件 然后页面渲染符合条件的数据
时间: 2024-03-06 11:49:15 浏览: 18
好的,我理解你的意思了。你想通过输入框输入条件,然后根据条件过滤数据,最后渲染符合条件的数据到页面上。这个需求可以通过以下步骤来实现:
1. 获取输入框中的条件:通过 JavaScript 获取输入框中的值,可以使用 input 事件监听输入框中的变化。
2. 过滤数据:使用获取到的条件过滤数据,可以使用 Array 的 filter() 方法等。
3. 渲染数据:将过滤出的数据渲染到页面上,可以使用 DOM 操作或模板引擎等方式。
以下是一个简单的示例代码,以过滤出名称包含输入框中文本的人为例:
```html
<!-- HTML -->
<input type="text" id="filter-input">
<ul id="person-list"></ul>
```
```javascript
// JavaScript
const personList = [
{ name: 'Alice', age: 20 },
{ name: 'Bob', age: 17 },
{ name: 'Charlie', age: 25 },
];
const filterInput = document.getElementById('filter-input');
const personListEl = document.getElementById('person-list');
filterInput.addEventListener('input', () => {
const filterText = filterInput.value;
const filteredList = personList.filter(person => person.name.includes(filterText));
personListEl.innerHTML = '';
filteredList.forEach(person => {
const li = document.createElement('li');
li.textContent = person.name;
personListEl.appendChild(li);
});
});
```
这段代码会将包含输入框中文本的人名渲染到页面上。当然,实际应用中可能会更加复杂,具体实现方式需要根据具体场景进行选择。