Autocomplete jquery with header or footer

Question

Is there some kind of Autocomplete jQuery Plugin in which I can add some blocks with a click in resultblock? Something like Header or Footer for Results, where I can put some checkboxes and process the results again.

Answer 1

The easiest way is to extend jQuery UI autocomplete using the _renderMenu native function.

http://jqueryui.com/demos/autocomplete/#default

HTML:

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

JQuery

 $(function () { //DOM Ready var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"]; $.widget( "custom.customcomplete", $.ui.autocomplete, { // our fancy new _renderMenu function adds the header and footers! _renderMenu: function( ul, items ) { var self = this; $.each( items, function( index, item ) { if (index == 0) ul.append( '<li><input type="checkbox"> I\'m at the top! Choose me!</li>' ); self._renderItem( ul, item ); if(index == items.length - 1) ul.append( '<li><input type="checkbox"> I\'m at the bottom! Choose me!</li>' ); }); } }); // note the new 'widget', extended from autocomplete above $( "#tags" ).customcomplete({ source: availableTags }); }); 

See a working example here: http://jsfiddle.net/kJUdt/