Datalist onkeyup not working via ajax value - php

Question

I'm stuck with this problem with in a week. I tried to set a onkeyup on datalist, only allow to submit within datalist autocomplete option value. I tried 2 different script but it has the same problem. When my option value is came via ajax, my textbox not allowing to type even if the value is in the option list. Why it is? Help please. I'm stuck with this :/
When I tried to echo the option list just like this
<input list="languages" id="none"></input>
<datalist id="languages" name="options">
<option value=""></option>
<?php echo $option1; ?>
</datalist>
the onkeyup works well. But when the value is came from ajax, the problem comes in. Why is that? Please help me with this.
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>
Ajax
<?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

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