在輸入文本中搜索然后使用Ajax PHP搜索結果將是下拉列表

Question

應該有一個輸入文本框，如果用戶寫任何文本，它應該顯示客戶名稱的下拉列表

<script>
    function custlist() {
        $.ajax({
            url: "custlist.php",
            success: function(result) {
                $("#customerlist").html(result);
            }        
        });
    }
    function showCustomers(str) {
        $.ajax({
            type: "GET",
            url: "customerlist.php",
            data:'q='+str,
            success: function(result) {
                $("#customerlist").html(result);   
            }        
        });
    }
</script>

<input type="text" oninput="showCustomers(this.value)" placeholder="Search here" name="CustomerNo" /> 
<select name="Cno" id="customerlist" onfocus="custlist()">
    <option value="">Customer Name</option>
</select>

custlist.php

<?php
    $sql2 = 'SELECT Customer_Name as Cname,No from customers order by Customer_Name';
    $result2 = mysqli_query($connection, $sql2);

    if (mysqli_num_rows($result2) > 0) { ?>
        <option value="">Customer Names</option>                
        <?php // output data of each row
            while($row2 = mysqli_fetch_assoc($result2)) { ?>
                <option value="<?php echo $row2['No']; ?>"><?php echo $row2["Cname"]; ?>
                </option>
        <?php } ?>
<?php } ?>

customerlist.php

<?php          
    $q = $_REQUEST["q"];
    // lookup all hints from array if $q is different from ""
    if ($q !== "") {
        $sql2 = "SELECT Customer_Name as Cname,No from customers where Customer_Name like '".$q."%s' order by Customer_Name";
        $result2 = mysqli_query($connection, $sql2);

        if (mysqli_num_rows($result2) > 0) { ?>
            <option value="">Customer Names</option>                
            <?php // output data of each row
                while($row2 = mysqli_fetch_assoc($result2)) { ?>
                    <option value="<?php echo $row2['No']; ?>"><?php echo $row2["Cname"]; ?>
                    </option>
            <?php } ?>
    <?php } ?>
<?php } ?>

我在我的下拉列表中獲取數據，但是我希望如果我在文本框中寫入內容，那么它會自動顯示匹配該字符的下拉列表。

還有一個問題......

第二期： - 當我首先鍵入“abd”時，它會顯示以“abd”開頭的客戶名稱，但會自動顯示以“ab”開頭的下一個名稱，然后是“a”然后為空。為什么會這樣？

提前致謝。

Answer 1

而不是Javascript：

$.ajax({
    type: "GET",
    url: "customerlist.php",
    data:'q='+str,
    success: function(result){
        $("#customerlist").html(result);
    }  
});

和PHP：

<?php

$q = $_REQUEST["q"];

試試這個Javascript：

$.ajax({
    type: "POST",
    url: "customerlist.php",
    data: {q: str},
    success: function(result){
        $("#customerlist").html(result);
    } 
});

和PHP：

<?php

$q = $_POST['q'];

希望這可以幫助！