2番目のjQueryオートコンプリートでヘッダーが見つからない

Question

2つの入力ボックスのjQueryオートコンプリートを同じページに作成しています。オートコンプリート機能は、両方の入力ボックスで同じです。オートコンプリートのヘッダーを追加したいと思います。しかし、jQueryはヘッダを2番目の入力ボックスに追加しません。

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

I'am ..のでポスト。そのために残念。 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 
    }); 
});