0
如何僅允許我的輸入數據列表選項的選項值。我看到一些腳本允許基於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>