javascript - JavaScript：如何根据“Datalist”的选定项将用户重定向到页面

Question

例如，我有这个数据列表：

    <datalist id ="List_1">
     <option value="Page 1">
     <option value="Page 2">
    </datalist>

    <input type = "search" name = "search" list = "List_1">

如果他在列表中选择“第 1 页”时选择“第 1 页”，我如何将用户重定向到第 1 页。先谢谢了~！

Answer 1

正如其他评论中提到的，跳转列表可能更合适。input当用户在 中输入不在 中的内容时，您会将用户重定向到哪里datalist？

如果要确保该值是数据列表中的选项之一，则必须进行额外检查：

document.querySelector("input[name='search']").addEventListener('input', function(e){
   var input = e.target,
       val = input.value;
       list = input.getAttribute('list'),
       options = document.querySelectorAll('#'+list + ' option');

    for(var i = 0; i < options.length; i++) {
        var option = options[i];
        if(option.value === val) {
            // we have a match, go to the value url
            window.location.href = "http://example.com/" + val;
        }
    }

    // still here? no match found
    doSomethingElse();
});

Answer 2

听起来您真的想要一个跳转列表而不是数据列表。但无论如何，你的听众应该是这样的。

function(e){
    if (e.target.list.options[0]){
        /* location.href = ''; */
    }
}

Answer 3

您可以使用以下 html 结合 javascript 将页面重定向到给定链接：

<datalist id="List_1">
   <option value="Page 1"></option>
   <option value="Page 2"></option>
</datalist>

<input type="search" name="search" list="List_1">

document.querySelector('input').oninput = function() {
   window.location.href = this.value;
};

希望这可以帮助