ヘッダー/フッターでjQueryスタイルのオートコンプリート

Question

いくつかのクリックブロックをresultblockに追加できるオートコンプリートjQueryプラグインはありますか？結果のヘッダーやフッターのようなもの。チェックボックスを入れて結果をもう一度処理できます。

Answer 1

最も簡単な方法は、独自の_renderMenu関数を使用してjQuery UIオートコンプリートを拡張することです。

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/