在第二次jQuery自动完成中缺少标头

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

您可以用每个函数来解决这个问题。如下所示：

$('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

Answer 2

我仍然不能添加评论。因此是一个职位。很抱歉。

在这里你得到了一个答案：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
    });
});