Thực hiện hành động khi nhấp HTML5 datalist tùy chọn

Question

Tôi đang sử dụng một <datalist>

<datalist id="items"></datalist> 

Và sử dụng AJAX để đưa vào danh sách

function callServer (input) { 
    xmlhttp = new XMLHttpRequest(); 
    xmlhttp.onreadystatechange = function(){ 
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200){ 
      //return the JSON object 
      console.log(xmlhttp.responseText); 
      var arr = JSON.parse(xmlhttp.responseText); 
      var parentDiv = document.getElementById('items'); 
      parentDiv.innerHTML = ""; 
      //fill the options in the document 
      for(var x = 0; x < arr.length; x++) { 
       var option = document.createElement('option'); 
       option.value = arr[x][0]; 
       option.innerHTML = arr[x][1]; 
       //add each autocomplete option to the 'list' 
       option.addEventListener("click", function() { 
        console.log("Test"); 
       }); 
       parentDiv.appendChild(option); 
      }; 

     } 
    } 
    xmlhttp.open("GET", "incl/search.php?value="+input.value, true); 
    xmlhttp.send(); 
} 

Tuy nhiên tôi không thể có được nó để thực hiện một hành động khi tôi bấm vào một lựa chọn trong datalist, ví dụ nếu tôi gõ vào "Ref F" và mục "Ref flowers" xuất hiện, nếu tôi click vào nó, tôi cần phải thực hiện một sự kiện.

Làm thế nào tôi có thể làm điều này?

option.addEventListener("click", function() { 
option.addEventListener("onclick", function() { 
option.addEventListener("change", function() { 

Answer 1

Do thiếu các sự kiện có sẵn cho <datalist> yếu tố, không có cách nào để lựa chọn từ những gợi ý khác hơn là xem các 's input sự kiện (change, input, vv). Ngoài ra, hãy xem câu trả lời của tôi ở đây: Determine if an element was selected from HTML 5 datalist by pressing enter key

Để kiểm tra xem lựa chọn có được chọn trong danh sách hay không, bạn nên so sánh từng thay đổi với các tùy chọn có sẵn. Điều này có nghĩa là sự kiện cũng sẽ kích hoạt khi người dùng nhập một giá trị chính xác theo cách thủ công, không có cách nào để ngăn chặn điều này.

document.querySelector('input[list="items"]').addEventListener('input', onInput); 
 

 
function onInput(e) { 
 
    var input = e.target, 
 
     val = input.value; 
 
     list = input.getAttribute('list'), 
 
     options = document.getElementById(list).childNodes; 
 

 
    for(var i = 0; i < options.length; i++) { 
 
    if(options[i].innerText === val) { 
 
     // An item was selected from the list! 
 
     // yourCallbackHere() 
 
     alert('item selected: ' + val); 
 
     break; 
 
    } 
 
    } 
 
}

<input list="items" type="text" /> 
 
<datalist id="items"> 
 
    <option>item 1</option> 
 
    <option>item 2</option> 
 
</datalist>

Answer 2

Xin lỗi vì đào lên câu hỏi này, nhưng tôi đã có một vấn đề tương tự và có một giải pháp, mà nên làm việc cho bạn, quá.

function onInput() { 
 
    var val = document.getElementById("input").value; 
 
    var opts = document.getElementById('dlist').childNodes; 
 
    for (var i = 0; i < opts.length; i++) { 
 
     if (opts[i].value === val) { 
 
     // An item was selected from the list! 
 
     // yourCallbackHere() 
 
     alert(opts[i].value); 
 
     break; 
 
     } 
 
    } 
 
    }

<input type='text' oninput='onInput()' id='input' list='dlist' /> 
 

 
<datalist id='dlist'> 
 
    <option value='Value1'>Text1</option> 
 
    <option value='Value2'>Text2</option> 
 
</datalist>

Giải pháp này có nguồn gốc từ giải pháp Stephan Mullers. Nó cũng sẽ làm việc với một chuyên viên dữ liệu tự động.

Không may là không có cách nào để biết liệu người dùng đã nhấp vào một mục từ nhà dữ liệu hay đã chọn nó bằng cách nhấn phím tab hoặc nhập toàn bộ chuỗi bằng tay.

Answer 3

Bộ dữ liệu không hỗ trợ trình nghe nhấp chuột và OnInput rất tốn kém, kiểm tra mọi lúc mọi danh sách nếu có thay đổi.

Những gì tôi đã làm là sử dụng:

document.querySelector('#inputName').addEventListener("focusout", onInput); 

FocusOut sẽ được kích hoạt mỗi khi một khách hàng nhấp vào văn bản đầu vào và hơn bấm bất cứ nơi nào khác. Nếu họ nhấp vào văn bản, hơn nhấp vào một nơi khác tôi giả định họ đặt giá trị mà họ muốn.

Để kiểm tra nếu giá trị là hợp lệ bạn làm tương tự như đầu vào:

function onInput(e) { 
     var val = document.querySelector('#inputName').value; 
     options = document.getElementById('datalist').childNodes; 
     for(var i = 0; i < options.length; i++) { 
      if(options[i].innerText === val) { 
        console.log(val); 
        break; 
      } 
     } 
    }