Hello Friends,

In the current web world many websites are using auto suggest box instead of drop-down. If you want use this please follow the below example:

1) Define your text-box

<input name="abc" id="search-box" class="form-control" placeholder="Press Key" autocomplete="on" type="text">
<div id="suggesstion-box"></div>  // make sure this div should be place under your suggestion box textbox

2) Call your jquery function

 $(document).ready(function(){      
    $("#search-box").keyup(function(){
        $.ajax({
        type: "POST",
        url: "yoururlpath_forajaxfunction",
        data: {'keyword': $(this).val() },

        beforeSend: function(){
            $("#search-box").css("background","#FFF url(LoaderIcon.gif) no-repeat 165px");
        },
        success: function(data){
            $("#suggesstion-box").show();
            $("#suggesstion-box").html(data);
            $("#search-box").css("background","#FFF");
        }
        });
    });
});

3) PHP AJAX function

function custom_auto_suggest_callback(){    // Your AJAX function name
global $wpdb;
if(!empty($_POST['keyword'])) {
$query ="SELECT concat(`first_name`,' ',`last_name`) as `first_name` FROM `wp_connections` WHERE `added_by` = ".get_current_user_id()." and deleted = '0' and (first_name like '%".$_REQUEST['keyword']."%' or last_name like '%".$_REQUEST['keyword']."%')ORDER BY first_name LIMIT 0,6";
$result = $wpdb->get_results($query);

if(!empty($result)){ ?>
<ul id="country-list">
<?php for($i=0; $i<count($result); $i++){ ?>
    <li onclick="selectContact('<?php echo $result[$i]->first_name; ?>');">
        <?php echo $result[$i]->first_name; ?>
    </li>
<?php } ?>
</ul>
<?php } } 
exit;
}