代码之家 › 专栏 › 技术社区 › Paili

如何在jQuery自动完成中添加其他内容?

autocomplete jquery-ui jquery javascript

Paili · 技术社区 · 6 年前

我想构建一个自动完成jQuery自动完成。我想再加一个 <li> 在列表的末尾。所以我用了这个:

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

<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>

这很好,但当我将鼠标悬停在附加 <li> 。也许是因为 <li> 有一个值和一个键,但我的附加值除外 <li> 。但我不知道如何避免那个错误消息。

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

但都是一样的。

1 回复 | 直到 6 年前

Marinos An 6 年前

看来 _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 而不是原型,但我想结果应该是一样的。

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

1 年前

Community wiki · 无法从jquery文档调用函数

1 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前