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

Comments (3)

  • JimmiXS

    Monday, 08 August, 2016 12:55 AM

    Thank you

  • seo

    Saturday, 23 July, 2016 07:23 PM

    Hello Web Admin, I noticed that your On-Page SEO is is missing a few factors, for one you do not use all three H tags in your post, also I notice that you are not using bold or italics properly in your SEO optimization. On-Page SEO means more now than ever since the new Google update: Panda. No longer are backlinks and simply pinging or sending out a RSS feed the key to getting Google PageRank or Alexa Rankings, You now NEED On-Page SEO. So what is good On-Page SEO?First your keyword must appear in the title.Then it must appear in the URL.You have to optimize your keyword and make sure that it has a nice keyword density of 3-5% in your article with relevant LSI (Latent Semantic Indexing). Then you should spread all H1,H2,H3 tags in your article.Your Keyword should appear in your first paragraph and in the last sentence of the page. You should have relevant usage of Bold and italics of your keyword.There should be one internal link to a page on your blog and you should have one image with an alt tag that has your keyword....wait there's even more Now what if i told you there was a simple Wordpress plugin that does all the On-Page SEO, and automatically for you? That's right AUTOMATICALLY, just watch this 4minute video for more information at. Seo Plugin

  • Mark

    Friday, 13 May, 2016 06:31 AM

    amazing

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