Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Faiza's avatar
Level 1

Sort dropdown search result

I have a dropdown with search function that use select2 library. what I want to do now is, I want the dropdown search result shows the result that begin with the letter that user key in, in the placeholder. My big problem is, the dropdown will shows two data which are customer_code at the front and followed by customer_name. I want the result sort by customer_name. For example, if the user type 'F' than the dropdown will shows all customer_name that start with letter F. Can someone help me how should I edit my script to achieve the result that I want?

Here is what I've don so far:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

<div class="CodeDropdown">
    <div class="form-group"><label>Select Customer</label>    
    <select id="ddlModel"> 
        <option value="">-- Select Customer --</option>
            <?php
                include "dbconnect.php";
                $records = mysqli_query($conn, "SELECT * From customer_list ORDER BY customer_name ASC");
                while($data = mysqli_fetch_array($records)) {
                    echo "<option value='". $data['customer_id'] ."'>" .$data['customer_code']. "      -      " . $data['customer_name']."</option>";
                }
            ?>  
    </select>
    </div>
</div>
    
<script>
    $(document).ready(function(){
         $("#ddlModel").select2({
            matcher: function(params, data) {
                // If there are no search terms, return all of the data
                if ($.trim(params.term) === '') {
                    return data;
                }
                
                // Check if the first character of the search term matches the first character of the data text
                if (data.text.charAt(0).toLowerCase() === params.term.charAt(0).toLowerCase()) {
                    return data;
                }
                
                // If it doesn't match, return null
                return null;
            }
        });
    });
</script>

0 likes
4 replies
LaryAI's avatar
Level 58

To sort the dropdown search result by customer_name, you can modify the SQL query to include an ORDER BY clause that sorts the records by customer_name. Replace the following line:

$records = mysqli_query($conn, "SELECT * From customer_list ORDER BY customer_name ASC");

with:

$records = mysqli_query($conn, "SELECT * FROM customer_list ORDER BY customer_name");

To show only the customer_name in the dropdown search result, you can modify the option tag to display only the customer_name. Replace the following line:

echo "<option value='". $data['customer_id'] ."'>" .$data['customer_code']. " - " . $data['customer_name']."</option>";

with:

echo "<option value='". $data['customer_id'] ."'>" . $data['customer_name']."</option>";

With these modifications, the dropdown search result will show only the customer_name and will be sorted by customer_name.

Faiza's avatar
Level 1

@LaryAI I still want to show both customer_code and customer_name in the result but I want the result to be sort by customer_name

Faiza's avatar
Level 1

@Tray2 I never knew about this before. Thank you for your suggestion. I will take a look on it :)

Please or to participate in this conversation.