假设您有一个数据列表，如下所示：
function validate() {
let items = document.getElementById("zip").magicalMethodThatReturnsDatalistOptions();
console.log("Remaining items: " + items.join(", ");
}<body> <input id="zip" list="zipcodes" name="zip" oninput="validate()"> <datalist id="zipcodes"> <option value=11011> <option value=11342> <option value=12121> <option value=15453> <option value=10001> </datalist> </body>并且您希望在用户键入时访问剩余的符合条件的自动完成项目，如下所示：
例如，对于上面的列表，如果用户输入“11”，控制台将记录：
剩余物品：11011、11342
有没有简单的方法可以做到这一点？
现在，我可以编写 oninput 函数来将当前值与选项数组进行比较 - 但我希望直接访问这些数据，因为它显然已经完成了。肯定在某个地方有一个包含此信息的数组。
我编写了这个解决方案，以获取选项元素的数据，将它们添加到数组中，然后循环遍历它们，看看它们是否包含或不包含其他项目具有的内容（在代码中解释），然后记录剩余项目。
let optionValues = document.getElementById("zipcodes").children;
let optionsRemaining = []; //Getting all options
for (let i = 0; i < optionValues.length; i++) {
let x = optionValues[i].getAttribute("value"); //Getting options value "1101, etc"
optionsRemaining.push(x); //Putting them into an array
}
console.log(optionsRemaining); //Logging them
//function to check
function validate() {
//Using a for loop to check through the whole array and return
for (let i = 0; i < optionsRemaining.length; i++) {
//Getting inputs value
let itemStringValue = document.getElementById("zip").value;
//Checking if input value includes what other things don't or do.
if (optionsRemaining[i].includes(itemStringValue)) {
//logging remaining data that can be selected.
console.log("Remained: " + optionsRemaining[i]);
}
}
//A divider so console is clean (Its bad without)
console.log("---------------");
}<body> <input id="zip" list="zipcodes" name="zip" oninput="validate()"> <datalist id="zipcodes"> <option value=11011> <option value=11342> <option value=12121> <option value=15453> <option value=10001> </datalist> </body>如果有帮助就点赞:)
编辑：您可以根据需要添加任意数量的选项标签，并且无需添加或额外的代码即可使用。