Saisie semi-automatique de style jQuery avec en-tête/pied de page

Question

Existe-t-il un plugin jQuery de saisie semi-automatique dans lequel je peux ajouter des blocs cliquables dans le bloc de résultats? Quelque chose comme en-tête ou pied de page pour les résultats, où je peux mettre des cases à cocher et gérer les résultats à nouveau.

Answer 1

Le moyen le plus simple consiste à étendre la saisie semi-automatique de l'interface jQuery avec votre propre fonction _renderMenu.

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 
    }); 

}); 

Voir un exemple de travail ici: http://jsfiddle.net/kJUdt/