Home Technology How to make a searchable drop-down list in PHP

How to make a searchable drop-down list in PHP

by Snehashis Mukherjee

Scrolling an enormous listing of countries, states or cities is annoying generally when you’re filling a type asking your nation to pick out. Immediately I provide you with an answer to make a searchable drop-down listing, very glad to share it with you :).

Immediately on this tutorial I’ll inform you how one can make a searchable drop-down listing in HTML, CSS. You’ll be able to create a static drop down however I’m creating it to dynamic. Test this demo.

Searchable Drop-down : Drawback

As you already know the issue, that’s why you might be right here for the answer. LOL…, So the issue is that this, suppose you have got created a type in your web site or internet software, you have got a protracted drop down listing to pick out it as you might need seen on quite a lot of web sites. It’s essential scroll it till you didn’t discover the merchandise you might be searching for.

Here is a Java Scanner Tutorial that you can check out from here

Solution

The answer is select2Select2 is a jQuery based mostly substitute for choose containers. It helps looking distant information units and infinite scrolling of outcomes.

When you’ll combine this, you’re going to get a search field on the prime of the choose drop-down listing. Now you may search the merchandise you might be searching for in a protracted listing. You’ll be able to test the installation guide additionally on the official web site.

Few Basic git Commands that You Should Know!

<link href="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/css/select2.min.css" rel="stylesheet" />

<script src="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/js/select2.min.js"></script>

Import these CDN hyperlinks to the top of the HTML web page and paste this shortcode to the footer to make your dropdown listing searchable.

// In your Javascript (external .js resource or <script> tag)
$(document).ready(function() {
$('.your-select-dropdown-class').select2();
});

Don’t fear I’ll present you how one can code step-by-step. I’m creating this choose 2 dropdown listing dynamic by fetching the international locations from the database. Let’s test the folder construction.

Addidtionally, I’ll present nation flags within the dropdown, to make it extra beautifull and eye catchy to the customers.

Step-by-step to code for Searchable Drop-down :

  • Create an index.php file to indicate the choose dropdown listing.
  • config.php is the connection file to the database.
  • flags folder incorporates all of the flags of the international locations. I’ll present it.

Now create these recordsdata.

index.php full code

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="icon" href="https://codingbirdsonline.com/wp-content/uploads/2019/12/cropped-coding-birds-favicon-2-1-192x192.png" type="image/x-icon">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/js/select2.min.js"></script>
    <title>How to make searchable dropdown with country flag - Coding Birds Online</title>
    <style>.required{color: #FF0000;}
           .flag{background-color: #ff884b;padding: 10px;border-radius: 20px;color: white}
    </style>
</head>
<body>
<div class="container">
    <?php
    include "config.php";
    $query = "SELECT * FROM bird_searchable_dropdown";
    $countries = $connection->query($query);
    ?>
    <div class="row">
        <div class="col-sm-9 col-md-7 col-lg-5 mx-auto">
            <div class="card card-signin my-5">
                <div class="card-body">
                    <center><img width="50" src="https://codingbirdsonline.com/wp-content/uploads/2019/12/cropped-coding-birds-favicon-2-1-192x192.png"></center>
                    <h5 class="card-title text-center">Searchable dropdown with country <span class="flag">FLAG</span></h5>
                    <form>
                        <div class="form-label-group">
                            <label for="inputEmail">Country <span class="required">*</span></label>
                            <select  name="select2" id="select2" class="form-control">
                                <option value="">Select</option>
                                <?php
                                if ($countries->num_rows>0){
                                    while ($country = $countries->fetch_object()){ ?>
                                        <option value="<?php echo $country->code;?>"><?php echo $country->countryname;?></option>
                                   <?php  }
                                }
                                ?>
                            </select>
                        </div> <br/>
                        <button type="submit" name="submitBtn" id="submitBtn" class="btn btn-md btn-primary btn-block text-uppercase" >Submit</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $("#select2").select2({
        templateResult: formatState
    });
    function formatState (state) {
        if (!state.id) {
            return state.text;
        }
        var baseUrl = "flags";
        var $state = $(
            '<span><img src="' + baseUrl + '/' + state.element.value.toLowerCase() + '.png" class="img-flag" /> ' + state.text + '</span>'
        );
        return $state;
    }
</script>
</body>
</html>

Config.php file

  1. <?php
  2. $connection = new mysqli(“localhost”,”root”,””,”codingbirds”);
  3. if (! $connection){
  4. die(“Error in connection”.$connection->connect_error);

Run the Code to get the searchable drop-down list

When you run the code you will get this output as I told above in the solution.

searchable drop-down list in PHP

Source Code & Demo

You’ll be able to obtain the total 100% working source code from here. You test this demo additionally.

Advanced git commands list with a complete tutorial

Conclusion

I hope you discovered defined above, When you have any ideas, are appreciated. And if in case you have any errors remark right here. You’ll be able to obtain the total 100% working source code from here

Test this https://minhaskamal.github.io/DownGit/ hyperlink to obtain a single folder(flags folder) from a repository on GitHub.

Okay, Thanks for studying this text, see you within the subsequent submit.

7 most popular JavaScript libraries in 2020

Completely happy Coding 🙂

Related Posts

Leave a Comment