Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to apply autocomplete feature to textbox with jQuery?

    • 0
    • 1
    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 659
    Comment on it

    Sometimes we need to implement autocomplete feature to input field for searching purpose. We can do this by using "autocomplete()" with jQuery.

    Example: In the below example I have created an array of country names and passed that as source to autocomplete function. I've applied the autocomplete feature to search box.

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Search</title>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    
    <script type="text/javascript">
    
        $(function() {
        var countryList = [
          "Afghanistan",
          "Australia",
          "Belgium",
          "Brazil",
          "Canada",
          "Colombia",
          "Denmark",
          "Egypt",
          "France",
          "Germany",
          "Hungary",
          "India",
          "Italy",
          "Kenya",
          "Malaysia",
          "Netherlands",
          "Poland",
          "Russia",
          "South Africa",
          "Thailand",
          "Ukraine",
          "Vietnam",
          "Zimbabwe"
        ];
    
        $( "#search-box" ).autocomplete({
              source: countryList,
              autoFocus:true,
                messages: {
                noResults: '',
                results: function() {}
        }
    });
    
    });
    </script>
    
    </head>
    <body>
        <div class="ui-widget">
            <label for="search-box" >Search</label>
            <input id="search-box"> 
        </div>
    
    </body> 
    </html>
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: