jQuery風格的自動填充與頁眉/頁腳

Question

是否有一些自動完成jQuery插件，我可以在結果塊中添加一些可點擊的塊？像Header或Footer for Results，我可以放置一些複選框並再次處理結果。

Answer 1

最簡單的方法是使用您自己的_renderMenu函數來擴展jQuery UI Autocomplete。

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/