Friday, 28 February 2014

Filled Under:

autocomplete jquery example

                                The Autocomplate provide live search without page refresh while you type in the text field. in this example i have suggestions are tags for programming languages like click on demo and type programming languege name like php,javascript,html,css etc... here is the search datasource is a simple javascript string. follow some below step to implement autosuggestion in your website easily.



first include those file


 <link rel="stylesheet" href="jquery-ui.css">
<script src="jquery-1.9.1.js"></script>
<script src="jquery-ui.js"></script>

and put this code in side of the <head>



 <script>
  $(function() {
    var availableTags = [
      "PHP",
      "HTML",
      "HTML5",
      "CSS",
      "CSS3",
      "C++",
      "jQuery",
      "JavaScript",
      "Lisp",
      "Perl",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  });
  </script>


html code


<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>







7 comments:

  1. Great post! I am actually getting ready to across this information, It’s very helpful for this blog.Also great with all of the valuable information you have Keep up the good work you are doing well.

    angularjs Training in chennai

    angularjs-Training in tambaram

    angularjs-Training in sholinganallur

    angularjs-Training in velachery

    angularjs Training in bangalore

    ReplyDelete
  2. I prefer to study this kind of material. Nicely written information in this post, the quality of content is fine and the conclusion is lovely. Things are very open and intenpython interview questions and answers | python tutorials

    ReplyDelete
  3. Needed to compose you a very little word to thank you yet again regarding the nice suggestions you’ve contributed here.
    Devops training in sholinganallur
    Devops training in velachery
    Devops training in annanagar
    Devops training in tambaram

    ReplyDelete
  4. A very nice guide. I will definitely follow these tips. Thank you for sharing such detailed article. I am learning a lot from you.

    rpa training in electronic-city | rpa training in btm | rpa training in marathahalli | rpa training in pune

    ReplyDelete
  5. Well Said, you have furnished the right information that will be useful to anyone at all time. Thanks for sharing your Ideas.

    Java training in Jaya nagar | Java training in Electronic city

    Java training in Chennai | Java training in USA | Java training in Kalyan nagar

    ReplyDelete
  6. Thank you for taking the time to provide us with your valuable information. We strive to provide our candidates with excellent care and we take your comments to heart.As always, we appreciate your confidence and trust in us

    Data Science course in Chennai | Data science course in bangalore

    Data science course in pune | Data science online course

    Data Science Interview questions and answers

    ReplyDelete