blog post

The jQuery UI Autocomplete widget enables users to quickly find and select from a list of values as they type. If you find the jQuery UI Autocomplete demos and documentation too daunting, here are some examples with explanation to get you started. A note before you begin: the autocomplete data should look like one of the following regardless of the source option: If necessary, the widget normalizes the data behind the scenes to match the last format in the above mentioned list.

Source code


<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
	
	<script type="text/javascript">
	  $(document).ready(function () {
            /*Name with ID autocomplete*/

            var json = [{ "value": "1", "label": "Amit" }, { "value": "2", "label": "Shyam" }, { "value": "3", "label": "Ram" }];

           $(".autocompletetext").autocomplete({

                source: json,
                    focus: function(event, ui) {
                        // prevent autocomplete from updating the textbox
                        event.preventDefault();
                        // manually update the textbox
                        $(this).val(ui.item.label);
                    },
                    select: function(event, ui) {
                        // prevent autocomplete from updating the textbox
                        event.preventDefault();
                        // manually update the textbox and hidden field
                        $(".selecteddata").append('<p>Name: ' + ui.item.label + ', ID:' + ui.item.value + '</p>');
                    }
            });
			});

 </script>

 <p style="width:300px;">Name with ID:</p>
<input type="text" class="autocompletetext" style="width:300px;" placeholder="Type: Ram,Shyam.." />
</div>






<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.9.3/typeahead.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript">
    $(document).ready(function () {
            /*Name with ID autocomplete*/

            var json = '[{ "id": "1", "name": "Amit" }, { "id": "2", "name": "Shyam" }, { "id": "3", "name": "Ram" }]';
            json = $.parseJSON(json);
            $(".bootstrap").typeahead({
                source: function (query, process) {
                    objects = [];
                    map = {};

                    $.each(json, function (i, object) {
                        map[object.name] = object;
                        objects.push(object.name);
                    });
                    process(objects);
                },
                updater: function (item) {
                    $(".selecteddata").append('<p>Name: ' + map[item].name + ', ID: ' + map[item].id + '</p>');
                    return item;
                }
            });
            /*Name with ID autocomplete*/

        });
    </script>
	
        <p style="width:300px;">Name with ID:</p>
        <input type="text" class="bootstrap" style="width:300px;" placeholder="Ram,Shyam.." />

jQuery UI Autocomplete and Bootstrap Typehead
  • Share This Story


Pleas give your valuable comments to improve the contents.

about author

Atul kumar shukla


I'm Atul Kumar Shukla, working as a web developer.
Welcome to my Blog. This is my personal blog where i post my own questions and answers , articles about ASP.Net., SQL Server, HTML, CSS, Jquery and many more..

Visit Profile

Leave a comment

Name
E-mail
Url
Message

Get More Stuff
Subscribing to the TheOneblogs newsletter and get intersting stuff and updates to your email inbox.
Your Email

 

Style Switcher

Change Color

×! We use cookies to improve your user experience. More information