jQuery样式的带页眉/页脚的自动完成

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

最简单的方法是使用自己的renderMenu函数扩展jQuery UI Autocomplete

html:

标签：

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

});

$（函数（）{//DOM就绪
var availableTags=[
“动作脚本”，
“AppleScript”，
“Asp”，
“基本”，
“C”，
“C++”，
“Clojure”，
“COBOL”，
“ColdFusion”，
“二郎”，
“Fortran”，
“好极了”，
“哈斯克尔”，
“爪哇”，
“JavaScript”，
“口齿不清”，
“Perl”，
“PHP”，
“Python”，
“红宝石”，
“斯卡拉”，
“计划”]；
$.widget（“custom.customcomplete”，$.ui.autocomplete{
//我们新颖的_renderMenu函数添加了页眉和页脚！
_renderMenu：功能（ul，项目）{
var self=这个；
$。每个（项目、功能（索引、项目）{
如果（索引==0）
追加（“
我在顶端！选择我！
”）；
自我评估（ul，项目）；
if（index==items.length-1）
追加（“
我在底部！选择我！
”）；
});
}
});
//请注意，新的“小部件”是从上面的“自动完成”扩展而来的
$（“#标记”）.customcomplete({
资料来源：availableTags
});
});

---

请参阅此处的一个工作示例：

我建议使用append/prepend运算符而不是“if”和“check length”：

\u renderMenu:function（ul，items）{var that=this；ul.prepend（“
我在顶部！选择我！
”）；$.each（items，function（index，item）{that.\u renderItemData（ul，item）；}）；ul.append（“
我在底部！选择我！
”）；}，

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

});