Datalist onkeyup無法通過ajax值工作

Question

我在一個星期內遇到了這個問題。我試圖在datalist上設置onkeyup，只允許在datalist自動完成選項值內提交。我嘗試了2種不同的腳本，但它有同樣的問題。當我的選項值通過ajax傳入時，即使值位於選項列表中，我的文本框也不允許輸入。爲什麼是這樣？請幫助。我堅持這一點：/

當我試圖呼應選項列表就這樣

<input list="languages" id="none"></input> 
<datalist id="languages" name="options"> 
<option value=""></option> 
<?php echo $option1; ?> 
</datalist> 

中的onkeyup效果很好。但是當價值來自ajax時，問題就出現了。爲什麼是這樣？請幫我解決一下這個。

的index.php

Drop1 
<?php 
    $mysqli = new mysqli("localhost", "root", "", "2015"); 
    $combo = $mysqli->query("SELECT * FROM category GROUP BY cat_code ORDER BY id"); 
    $option = ''; 
    while($row = $combo->fetch_assoc()) 
     { 
     $option .= '<option value = "'.$row['category'].'">'.$row['category'].'</option>'; 
     } 
    ?> 

<select id="main" name="main"> 
<option value="" disabled="disabled" selected="selected">Choose</option> 
<?php echo $option; ?> 
</select> 
<span id="result"> <input list="languages" id="none"></input> 
<datalist id="languages" name="options"> 
<option value=""></option> 
</datalist></span> 
<input type="submit" name="submit" value="Submit"/> 
    <script type="text/javascript"> 
     $('#main').change(function() { 
      $.ajax({ 
       url: 'getajax.php', 
       data: { 
        mainlist_id: $(this).val() 
       }, 
       dataType: 'html', 
       type: 'POST', 
       success: function (data) { 
        $('#languages').html(data); 
       } 
      }); 
     }); 
    </script> 
<script> 
$(document).ready(function() { 
var validOptions =[]; 
$("#languages option").each(function(){ 
    validOptions.push($(this).val())  
}); 
    $("#none").autocomplete(validOptions, { mustMatch: true }); 
}); 
$('input#none').result(function(event, data, formatted) { 
    $("#result").html(!validOptions ? "No match found!" : "Selected: " + formatted); 
}).keyup(function() { 
    $(this).search(); 
    $(this).css("background-color", "#D6D6FF"); 
}); 
</script> 

阿賈克斯

<?php 
if (isset($_POST["mainlist_id"])) { 
    $mysqli = new mysqli("localhost", "root", "", "2015"); 
    $main = $mysqli->real_escape_string($_POST["mainlist_id"]); 

    $result1 = $mysqli->query("SELECT * FROM code WHERE cat_code='$main' GROUP BY item_code ORDER BY item"); 

    $option1 = ''; 
    while($row = $result1->fetch_assoc()) 
     { 
     $option1 .= '<option value = "'.$row['item'].'">'.$row['item'].'</option>'; 
     } 
     echo $option1; 
    } 
?> 

Answer 1

試試這個：

success: function (data) { 
       $('#languages').html(data); 
       $("#languages option").each(function(){ 
       validOptions.push($(this).val())  
       }); 
      }