Автозаполнение в стиле jQuery с верхним / нижним колонтитулом

Question

Есть ли какой-нибудь плагин автозаполнения jQuery, где я могу добавить несколько кликабельных блоков в блоке результатов? Что-то вроде верхнего или нижнего колонтитула для результатов, где я могу поставить некоторые флажки и снова обработать результаты.

Answer 1

Самый простой способ - расширить автозаполнение интерфейса jQuery с помощью собственной функции _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
   });

});

См. Рабочий пример здесь: http://jsfiddle.net/kJUdt/