在输入文本中搜索然后使用Ajax PHP搜索结果将是下拉列表

Question

There Should be an Input textbox, If user writes any text it should display dropdown list of customer names

<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 } ?>

I am getting the data in my dropdown, but I want that if I write something in text box then automatically it shows dropdown with matching that characters.

And one more issue I have...

2nd Issue:- When I type "abd" first it shows customer names starting with "abd" but automatically it shows next names starting with "ab" then "a" then empty.. Why is that?

Thanks in advance.

Answer 1

Instead of Javascript:

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

And php:

<?php

$q = $_REQUEST["q"];

Try doing this Javascript:

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

And php:

<?php

$q = $_POST['q'];

Hope this helps!