Attractive Auto Complete Text Box in Asp.Net using Jquery

First of all the following code inside your <head> tag ::

<link rel="stylesheet" href="jquery-ui.css">
  <script type="text/javascript" src="jquery-1.9.1.js"></script>
  <script  type="text/javascript" src="jquery-ui.js"></script>
  <script>
      $(function () {
          var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
          $("#tags").autocomplete({
              source: availableTags
          });
      });
  </script>



And then add the following code inside your body tag anywhere you required ::

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


Download links for the .Js and .css files::

http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css
http://code.jquery.com/jquery-1.9.1.js
http://code.jquery.com/ui/1.10.4/jquery-ui.js

Comments

Post a Comment

Popular posts from this blog

StateCode and StatusCode Values for mostly used entities in Microsoft Dynamics CRM 2013

How to show enlarge image when mouse hover on image or link in Asp.Net(c#) using JavaScript

Search data in Gridview on Textbox Key press event using JQuery in Asp.Net- C#

go to top image