Question

我想构建一个自动完成的jQuery自动完成功能。我想添加一个额外的<li> 在列表的末尾。所以我用过这个：

＆＃13;

$( function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  } );
  
  
  jQuery.ui.autocomplete.prototype._renderMenu = function( ul, items 			) {

        var that = this;
        $.each( items, function( index, item ) {
            that._renderItemData( ul, item );
        });
       $( ul ).append("<li class='selectall'>show all</li>");
       
       $( ".selectall" ).on( "click", function() {
   				console.log("select!");
          $( ".label" ).css("color", "red");
        } );
       
    };

＆＃13;

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="ui-widget">
  <label class="label" for="tags">Tags: </label>
  <input id="tags">
</div>

＆＃13;

当我将鼠标悬停在其他<li>上时，除了控制台中显示的错误消息之外，它的工作正常。也许是因为每个<li>都有一个值和一个键，除了我的额外<li>。但我不知道如何避免错误信息。

我也试过这个：Add a additional <li> tag to the end of rails3-jquery-autocomplete plugin

但它只是一样。

Answer 1

似乎_renderMenu之前执行了_renderItem，所以您可以在_renderMenu中添加新项目并在_renderItem中进行呈现。

$.widget( "custom.autocomplete", $.ui.autocomplete, {
    _renderMenu : function( ul, items            ) {

        var that = this;
        items.push({label:"show all", value:"", isShowAll:true})
        $.each( items, function( index, item ) {
            that._renderItemData( ul, item );
        });

    },
    _renderItem: function( ul, item ) {
        var li = $( "<li>" )
            .attr( "data-value", item.value )
            .append( item.label )
            .appendTo( ul );

        if(item.isShowAll===true){
            li.on( "click", function() {
                console.log("ShowAll selected");

            });
        }
        return li;
    }    
});

注意：我使用的是$.widget而不是原型，但我猜结果应该是相同的。

如何在jQuery自动完成中添加额外的<li>？

1 个答案: