autocomplete仅允许来自数据库的选项值

Question

如何仅允许输入datalist选项的选项值。我看到一些关于允许基于javascript变量的值的脚本，但是如果选项值来自数据库呢？如何在下面的脚本中更改validOptions的值取决于选项列表中的可用值？在我的下拉列表中，下面是使用ajax将值发送到input list='languages'。

就像在图片中一样，如果我选择供应商圆珠笔，闪存驱动铅笔等应该只允许输入。

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

<select id="main" name="main">
<option value="" disabled="disabled" selected="selected">Choose</option>
<?php echo $option; ?>
</select>

<input list="languages" id="list">
<datalist id="languages">
  <option value=""></option>
</datalist>

<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);
}
});
if ($(this).val() != '') {
    $("#list").val('');
} else {
    //here you can specify what to do if the value is NOT 
}
});
</script>

<script>
var validOptions = ["Bold", "Normal", "Default", "100", "200"]
previousValue = "";

$('#list').autocomplete({
    autoFocus: true,
    source: validOptions
}).keyup(function() {
    var isValid = false;
    for (i in validOptions) {
        if (validOptions[i].toLowerCase().match(this.value.toLowerCase())) {
            isValid = true;
        }
    }
    if (!isValid) {
        this.value = previousValue
    } else {
        previousValue = this.value;
    }
});
</script>

Answer 1

您可以使用远程数据源进行自动填充 http://jqueryui.com/autocomplete/#remote

您可以绑定响应事件以更新您的validOptions数组 http://api.jqueryui.com/autocomplete/#event-response