通过从后端获取数据创建下拉列表

Question

我已经创建了一个课程容器，我想通过从后端获取选项来填充这些选项

(网址:https://ffcc-app.herokuapp.com/get/courses)

<div class="container">
<form action="#" method="POST">
<h2>Course 1</h2>
<div class="select-box">
<div class="options-container">
<select class="option" id="one">
<option value="">Select a course.. </option>

</select>
</div>
<div class="selected">
Select Courses
</div>
<div class="search-box">
<input type="text" placeholder="Search..." />
</div>
</div>
</form>
</div>

当我在搜索框中输入任何字符时，它应该过滤选项。有人可以帮助我如何从URL获取数据填充选项列表?

PS:我熟悉Fetch API获取数据

Answer 1

你可以这样做:

let result = {};
let allCourses = {};
function filterCourses() {
var filter = document.getElementById("inputFilter").value;
result.courses = allCourses.courses.filter(x => x.title.includes(filter))
let select = document.getElementById("one");

while (select.firstChild) {
select.removeChild(select.firstChild);
}

for (let i = 0; i < result.courses.length; i++){
let option = document.createElement("option");
option.value = result.courses[i]._id;
option.text = result.courses[i].title;
select.appendChild(option);
}
}
async function getCourses() {
let url = 'users.json';
try {
let res = await fetch("https://ffcc-app.herokuapp.com/get/courses");
return await res.json();
} catch (error) {
console.log(error);
}
}
async function renderCourses() {
allCourses = await getCourses();
result = Object.assign({}, allCourses);
let select = document.getElementById("one");
for (let i = 0; i < result.courses.length; i++){
let option = document.createElement("option");
option.value = result.courses[i]._id;
option.text = result.courses[i].title;
select.appendChild(option);
}
}
renderCourses()

<div class="container">
<form action="#" method="POST">
<h2>Course 1</h2>
<div class="select-box">
<div class="options-container">
<select class="option" id="one">
<option value="">Select a course.. </option>

</select>
</div>
<div class="selected">
Select Courses
</div>
<div class="search-box">
<input type="text" id="inputFilter" placeholder="Search..." onchange="filterCourses()"/>
</div>
</div>
</form>
</div>

解释:加载完所有课程后，我为每门课程做了一个选项(_id作为选项值，title作为选项文本)。这是由renderCourses函数实现的。

然后是filterCourses函数:基本上它从输入中获取值并查找包含您在输入中键入的内容的选项。如果清除输入，函数返回所有的课程。

Answer 2

你必须得到你的api，创建一个函数来操作你的DOM，将数据传递给这个函数，以便它在选择标签内呈现内容。

这只是用于选择标签。

const select = document.querySelector('.option')
fetch('https://ffcc-app.herokuapp.com/get/courses')
.then(response => response.json())
.then(data => {
data.courses.forEach(course => render(course))
});
function render(course) {
const opt = document.createElement('option')
opt.value = course.title
const content = document.createTextNode(`${course.title}`)
opt.appendChild(content)
select.appendChild(opt)
}

<div class="container">
<form action="#" method="POST">
<h2>Course 1</h2>
<div class="select-box">
<div class="options-container">
<select class="option" id="one">
<option value="">Select a course.. </option>

</select>
</div>
<div class="selected">
Select Courses
</div>
<div class="search-box">
<input type="text" placeholder="Search..." />
</div>
</div>
</form>
</div>