Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Bootstrap Typeahead

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 277
    Comment on it

    The typeahead are very important input fields in web forms. The fundamental utilization of  typeahead is to enhance  the user experience by giving clues or a list of possible choices based in view of the text  entered while filling a form or looking something as in the Google search. Its primary reason is to save time and reduces the number of potential errors.

    To use typeahead.js in your project, download it from http://twitter.github.io/typeahead.js/  and also you can change any text-based <inputs> element into a typeahead.

    Here is the HTML code :- 

    <form id="my-form">
        <input class="form-control" name="search" type="text" placeholder="Type Here..." id="my-autoc">
            <br>
    </form>

    You need to add following Script :- 

    $('#my-autoc').typeahead({
        name: 'search',
        remote: {
          url: 'http://suggestqueries.google.com/complete/search?client=chrome&q=%QUERY',
          dataType: 'jsonp',
          cache: false,
          filter: function(parsedResponse){
              return (parsedResponse.length > 1) ? parsedResponse[1] : [] ;
          }
        }
      }).on('typeahead:selected', function(e){
        e.target.form.submit();
      });

    Bloodhound is the typeahead.js recommendation engine. It is exceptionally adaptable and offers advanced functionalities for example prefetching remote data, fast lookups through intelligent caching using the browser local storage etc.

    http://jsfiddle.net/CNMfL/295/

 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: