#autocomplete.js

New Post has been published on http://www.htmluse.com/autocomplete-js-a-jquery-plugin-for-search-hints/

Autocomplete.js - A jQuery plugin for search hints

Download   Demo

This is jquery plugin for Autocomplete.js that improve your search with hints.

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" href="css/autocomplete.css" type="text/css"> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="js/autocomplete.js"></script>

2. HTML

<div id="search-form"></div> <div id="message">Selection</div>

3. JAVASCRIPT

var proposals = ['boat', 'bear', 'dog', 'drink', 'elephant', 'fruit']; $(document).ready(function() $('#search-form').autocomplete( hints: proposals, width: 300, height: 30, onSubmit: function(text) $('#message').html('Selected: <b>' + text + '</b>'); ); );

4. OPTIONS

hints: words array for displaying hints

placeholder: search input placeholder (default: ‘Search’)

width: input text width

height: input text height

showButton: display search button (default: true)

buttonText: button text (default: ‘Search’)

onSubmit: function handler called on input submit