Onchange 停止在 Datalist 中显示答案

【问题标题】：Onchange stops display in DatalistOnchange 停止在 Datalist 中显示
【发布时间】：2022-02-17 18:18:45
【问题描述】：

<?php
    //connect to database
      $conn = mysqli_connect("localhost", "root", "", "inventory");
    
      if(mysqli_connect_errno($conn)) { 
        echo "Unable to connect to database server";
      }    
      
      //query database for items to populate
      $sql = "SELECT ITEM_NAME, ITEM_ID FROM item";
      $query = mysqli_query($conn, $sql);
      
      echo '<input type="text" id="item1" list="itemname1"/>';
      echo '<datalist id="itemname1" name="itemr1" onchange="showitem1(this.value); showecost1(this.value); showuom1(this.value);">'; //change select to datalist
      echo '<option value="">Select item</option>';
      
      while($selectedItem = mysqli_fetch_assoc($query)) {
        echo "<option value='".$selectedItem['ITEM_NAME']."'>{$selectedItem['ITEM_ID']}</option>";
      }

      echo '</datalist>'; //change select to datalist

      if (isset ($_POST['submit'])) {
      $selectedItem = $_POST['desc1'];
      }

    ?>

我有这段代码可以调用数据库中的数据并将其显示到数据列表中，但问题是onchange 事件不起作用，它应该通过从数据列表中选择数据来自动显示其他数据。如果我只是使用选择标签，它可以工作，但我想使用数据列表，以便用户可以输入不在数据库中的数据。

这是 JS 代码：

<script>
 function showitem1(str) {
 if (str=="") {
 document.getElementById("desc1").innerHTML="";
 return;
} 
if (window.XMLHttpRequest) {
 // code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp=new XMLHttpRequest();
 } else { // code for IE6, IE5
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
 xmlhttp.onreadystatechange=function() {
  if (xmlhttp.readyState==4 && xmlhttp.status==200) {
     document.getElementById("desc1").innerHTML=xmlhttp.responseText;
   }
 }
  xmlhttp.open("GET","gethint.php?a="+str,true);
  xmlhttp.send();

  }

 function showecost1(str) {
  if (str=="") {
   document.getElementById("ecost1").innerHTML="";
   return;
 } 
  if (window.XMLHttpRequest) {
   // code for IE7+, Firefox, Chrome, Opera, Safari
   xmlhttp1=new XMLHttpRequest();
 } else { // code for IE6, IE5
   xmlhttp1=new ActiveXObject("Microsoft.XMLHTTP");
 }
 xmlhttp1.onreadystatechange=function() {
   if (xmlhttp1.readyState==4 && xmlhttp1.status==200) {
     document.getElementById("ecost1").innerHTML=xmlhttp1.responseText;
   }
 }
 xmlhttp1.open("GET","gethint1.php?b="+str,true);
 xmlhttp1.send();

 }

 function showuom1(str) {
  if (str=="") {
   document.getElementById("uom1").innerHTML="";
   return;
 } 
 if (window.XMLHttpRequest) {
   // code for IE7+, Firefox, Chrome, Opera, Safari
   xmlhttp2=new XMLHttpRequest();
 } else { // code for IE6, IE5
   xmlhttp2=new ActiveXObject("Microsoft.XMLHTTP");
 }
  xmlhttp2.onreadystatechange=function() {
   if (xmlhttp2.readyState==4 && xmlhttp2.status==200) {
     document.getElementById("uom1").innerHTML=xmlhttp2.responseText;
   }
 }
 xmlhttp2.open("GET","gethint2.php?c="+str,true);
 xmlhttp2.send();

 }
 </script>

【问题讨论】：

stackoverflow.com/questions/15147728/…
无法获取。你能给我解释一下吗？谢谢。
显示您的JS 代码。
我已经包含了 JS 代码 urfusion。

标签： javascript php html dom-events

【解决方案1】：

你可以使用输入事件

$(document).on('change', 'input', function(){
    var options = $('datalist')[0].options;
    var val = $(this).val();
    for (var i=0;i<options.length;i++){
       if (options[i].value === val) {
          alert(val);
          break;
       }
    }
});

input事件比datalist元素有更好的支持，如果你已经在使用datalist元素，确实没有理由不使用它。

【讨论】：