Question

我在一周内遇到了这个问题。我试图在datalist上设置onkeyup，只允许在datalist autocomplete选项值内提交。我尝试了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>

的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

试试这个：

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

Datalist onkeyup无法通过ajax值工作

1 个答案: