JavaScript: Как перенаправить пользователя на страницу на основе выбранного пункта «DataList»

Question

у меня есть этот DataList, например:

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

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

Как я могу перенаправить пользователя на страницу 1, если он выберите «Page 1 ", когда он выбирает его в списке. Заранее спасибо ~!

Answer 1

Вы можете использовать следующий 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; 
}; 

Надеется, что это помогает

Answer 2

Это звучит, как вы действительно хотите получить список прыжка, а не данные список. Но в любом случае ваш слушатель должен быть чем-то вроде этого.

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

Answer 3

Как упоминалось в других комментариях, список переходов может быть более уместным. Где вы перенаправите пользователя, когда они что-то введут в input, который не находится в datalist?

Если вы хотите, чтобы убедиться, что значение является одним из вариантов из DataList вы должны сделать exra проверку:

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(); 
});