Search in Input text And then search results will be dropdown list using 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!