Display AutoComplete Drop down List on Focus using jQuery

In this post we will show you Display AutoComplete Drop down List on Focus using jQuery, hear for Display AutoComplete Drop down List on Focus using jQuery we will give you demo and example for implement.

Setting off an Display AutoComplete Drop down List capacity to demonstrate a dropdown list utilizing jQuery center occasion is basic. This element turns into a need when you gone over a circumstance where clients don’t have an unmistakable thought regarding what they are searching for, in the AutoComplete box.

Rather than utilizing a Wildcard character to pursuit, they anticipate that us will show a rundown with every one of the subtle elements to pick. So when the attention is determined to a textbox (input control), a rundown of predefined qualities is shown without writing a solitary character.




Demo Download

In spite of the way that the reason for an AutoComplete capacity is to inquiry information in view of characters, to make the hunt fast and simple, this may likewise be exceptionally valuable.

Saying this, we have to ensure that the rundown demonstrating qualities ought not be extremely protracted. On the off chance that you are bringing information from a database table with many columns, cut it off by extricating the Top 10 or 20 values, so that the client does not need to parchment it down to search for the words.

In one of my past articles, I have clarified with a case on the best way to utilize jQuery autocomplete() technique with Ajax and how to interface a remote database table to get values.

Demo Download

example of Display AutoComplete Drop down List on Focus using jQuery

<html>
<head>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
	<title> Display AutoComplete Drop down List on Focus using jQuery - onlinecode</title>
    <style>
        .ui-autocomplete { 
            cursor:pointer; 
            height:121px; 
            overflow-y:scroll;
        }    
    </style>
</head>
<body style="font-size:63.6%;">
    <div style="font:15px arial">
        <input type="text" id="settbCountries" />
    </div>
</body>
<script>
    $(document).ready(function() {
        setBindControls();
    });

    function setBindControls() {
        var Countries_serch = ['onlinecode', 
            'php', 
            'asp.net', 
            'java', 
            'magento',
            'laravel', 
            'zoomla', 
            'wordpress', 
            'codeigniter', 
            'vb.net', 
            'bootstrape'];

        $('#settbCountries').autocomplete({
            source: Countries_serch,
            minLength: 0,
            scroll: true
        }).focus(function() {
            $(this).autocomplete("search", "");
        });
    }
</script>
</html>




Demo Download

The AutoComplete() capacity is appended with the textbox control and when the attention is on the textbox, it triggers the concentration occasion, which demonstrate a drop down rundown every one of the qualities in the cluster.

There are couple of things we require comprehend from the above script.

Regularly, a hunt is introduced when a base arrangement of characters are entered in the textbox. Nonetheless, in the above script we have set the incentive for minLength as zero. Since the base character is set as zero, it has to do a particular hunt in the nearby information source.

//
minLength: 0 

The jQuery center occasion is appended with the AutoComplete() work. This calls a pursuit technique that gets information from the neighborhood information source (the cluster is the nearby information). Since we are not passing any an incentive with the pursuit strategy, it will demonstrate the whole rundown when a client sets concentrate on the textbox.

//
$(this).autocomplete("search", ""); 

Take a stab at changing the above technique by passing an incentive with the hunt strategy and perceive how it responds.

//
$(this).autocomplete("search", $(this).val());

Demo Download




Hope this code and post will helped you for implement Display AutoComplete Drop down List on Focus using jQuery. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve onlincode. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs onlincode.org