Question

我正在同一页面中为2个输入框创建一个jQuery自动完成。两个输入框的自动完成功能相同。我想为自动完成添加标头。但是jQuery没有将标题添加到第二个输入框。

var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];

    $('li.address input').autocomplete({
        source: availableTags
    }).autocomplete().data('ui-autocomplete')._renderMenu = function (ul, items) {
        var that = this;
        $.each(items, function (index, item) {
            that._renderItemData(ul, item);
        });

        //Append a header list item to the menu
        $(ul).prepend(
            "<li><div class='autocomplete_header'>Select an address to auto-populate your details</div></li>"
        );
    };

任何人都知道如何解决这个问题？

示例：https://jsfiddle.net/AsankaPrabath/5u27rdeu/2/

Answer 1

我仍然无法添加评论..所以一篇文章。对不起。

在这里你得到了答案：jQuery UI autocomplete - that._renderItemData is not a function

$.widget( "custom.catcomplete", $.ui.autocomplete, {
    _renderMenu: function( ul, items ) {
        var that = this,
            currentCategory = "";
        $.each( items, function( index, item ) {
            if ( item.category != currentCategory ) {
                ul.append( "<li><div class='autocomplete_header'>Select an address to auto-populate your details</div></li>" );
                currentCategory = item.category;
            }
            that._renderItemData( ul, item );
        });
    }
});     

$(function() {
    // Configure autocomplete for address field
  var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];

    $( "li.address input" ).catcomplete({
        source: availableTags
    });
});

Answer 2

您可以使用每个功能解决此问题。像这样：

$('li.address input').each(function (i, el) {
    el = $(el);
    el.autocomplete ... // Autocomplete setup for element

  });

我改变了你的代码。它是：

$(function () {
    // Configure autocomplete for address field
  var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
  $('li.address input').each(function (i, el) {
    el = $(el);
    el.autocomplete({
      source: availableTags
    }).autocomplete().data('ui-autocomplete')._renderMenu = function (ul, items) {
      var that = this;
      $.each(items, function (index, item) {
        that._renderItemData(ul, item);
      });

      //Append a header list item to the menu
      $(ul).prepend(
        "<li><div class='autocomplete_header'>Select an address to auto-populate your details</div></li>"
      );
    };

  });
});

jsFiddle Demo

第二个jQuery自动完成中缺少标题

2 个答案: