jQuery样式化的带有页眉/页脚的自动完成功能

Question

是否有一些自动完成jQuery插件，可以在resultblock中添加一些可点击的块？ 诸如“结果的页眉”或“页脚”之类的内容，可以在其中放置一些复选框并再次处理结果。

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/