헤더가 두 번째 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

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 
    }); 
});