Bind jQuery UI zur automatischen Vervollständigung mit .live()

Question

Ich habe überall gesucht, aber ich kann keine Hilfe zu finden scheinen ...

ich einige Textfelder haben, die dynamisch über JS erstellt werden, so muss ich Binden Sie alle ihre Klassen an eine Autovervollständigung. Daher muss ich die neue .live() -Option verwenden.

Als Beispiel alle Einzelteile mit einer Klasse von .foo zu binden, jetzt und Zukunft geschaffen:

$('.foo').live('click', function(){ 
    alert('clicked'); 
}); 

Es dauert (und verhält sich) die gleiche wie .bind(). Allerdings möchte ich eine Autovervollständigung binden ...

Das funktioniert nicht:

$('.foo').live('autocomplete', function(event, ui){ 
    source: 'url.php' // (surpressed other arguments) 
}); 

Wie kann ich .live() zur automatischen Vervollständigung binden?

UPDATE

Figured es mit Framer aus:

$(function(){ 
    $('.search').live('keyup.autocomplete', function(){ 
    $(this).autocomplete({ 
     source : 'url.php' 
    }); 
    }); 
}); 

Answer 1

Wenn Sie mit der jquery.ui.autocomplete.js diese

.bind("keydown.autocomplete") or .live("keydown.autocomplete") 

wenn nicht stattdessen versuchen, verwenden Sie die jquery.ui.autocomplete.js und sehen, ob es

arbeiten werde Wenn das nicht zutrifft, weiß ich nicht, wie um Ihnen zu helfen bro

Answer 2

die automatische Vervollständigung kein Ereignis ist eher eine Funktion, die für eine Textbox zur automatischen Vervollständigung Funktionalität ermöglicht.

Also, wenn Sie die js ändern können, die die Textfelder dynamisch erstellt, um das Textbox-Element als ein jquery-Objekt zu umbrechen und Autocomplete für dieses Objekt aufzurufen.

Answer 3

Sie können nicht. .live() unterstützt nur tatsächliche JavaScript-Ereignisse und kein benutzerdefiniertes Ereignis. Dies ist eine grundlegende Einschränkung der Funktionsweise von .live().

Answer 4

einfach hinzufügen, können Sie das .livequery Plugin für diesen Einsatz:

$('.foo').livequery(function() { 

    // This will fire for each matched element. 
    // It will also fire for any new elements added to the DOM. 
    $(this).autocomplete(options); 
}); 

Answer 5

Ich habe gerade bemerkt, dass Sie Ihren Beitrag mit dieser Antwort bearbeitet haben. Es war für mich offensichtlich, also poste ich es unten für andere. Vielen Dank.

$(function() 
{ 
    $('.search').live('keyup.autocomplete', function() 
    { 
    $(this).autocomplete({ source : 'url.php' }); 
    }); 
}); 

Answer 6

jQuery UI automatische Vervollständigung Funktion fügt automatisch die Klasse "ui-Auto-Vervollständigen-Eingang" auf das Element. Ich würde empfehlen, das Element im Fokus ohne die Klasse "ui-autocomplete-input" live zu binden, um eine erneute Bindung bei jedem Keydown-Ereignis innerhalb dieses Elements zu verhindern.

$(".foo:not(.ui-autocomplete-input)").live("focus", function (event) { 
    $(this).autocomplete(options); 
}); 

bearbeiten

Meine Antwort ist jetzt veraltet, da jQuery 1.7, siehe Nathan Strutz Kommentar für die Verwendung mit der neuen .on() Syntax.

Answer 7

.Live() funktioniert nicht mit Fokus. auch keyup.autocmplete macht keinen Sinn. Stattdessen haben das, was ich versucht und Arbeits ist diese

$(document).ready(function(){ 
$('.search').live('keyup' , function() 
    { 
    $(this).autocomplete({ source : 'url.php' }); 
    }); 
}) 

Das perfekt funktioniert gut.

Answer 8

können Sie versuchen, mit diesem:

$('.foo').live('focus.autocomplete', function() { 
    $(this).autocomplete({...}); 
}); 

Answer 9

Dies funktioniert für mich:

$(function() 
{ 
    $('.item_product').live('focus.autocomplete', function() 
    { 

    $(this).autocomplete("/source.php/", { 
     width: 550, 
     matchContains: true, 
     mustMatch: false, 
     selectFirst: false, 
    }); 

    }); 
}); 

Answer 10

Nach der Lektüre und Prüfung alle anderen Antworten der ich es für die aktuelle Version von JQuery aktualisiert haben und machte ein paar zwickt.

Das Problem mit der Verwendung von Keydown als das Ereignis, das .autocomplete() aufruft, ist, dass es für diesen ersten geschriebenen Buchstaben Autocomplete fehlschlägt. Fokussieren ist die bessere Wahl.

Eine andere Sache, die ich bemerkt habe ist, dass alle angegebenen Lösungen führen in .autocomplete() mehrfach aufgerufen werden. Wenn Sie der Seite dynamisch ein Element hinzufügen, das nicht mehr entfernt wird, sollte das Ereignis nur einmal ausgelöst werden. Auch wenn der Artikel wieder entfernt werden und das hinzugefügt ist, sollte das Ereignis entfernt werden und dann hinzugefügt jedes Mal wieder das Element entfernt oder hinzugefügt, so dass wieder auf dem Feld konzentriert unnötig wird nicht .autocomplete() jedes Mal anrufen.

Mein letzter Code ist wie folgt:

$(document).on('focus.autocomplete', '#myAutocomplete', function(e){ 
    $(this).autocomplete(autocompleteOptions); 
    $(document).off('focus.autocomplete', '#myAutocomplete'); 
}); 

Answer 11

zum automatischen Vervollständigung Funktion zu erhalten, wenn dynamisch für das on() Ereignis verwendet in jQuery> 1.7, mit der Syntax Nathan Strutz in seinem Kommentar bietet geladen:

$(document).on('focus', '.my-field:not(.ui-autocomplete-input)', function (e) { 
    $(this).autocomplete(options) 
}); 

wo .my-field ist ein Selektor für die automatische Vervollständigung Eingabeelement.

Answer 12

Sie können nur die Autovervollständigung innerhalb Eingang Live-Event setzen, wie folgt aus:

$('#input-element').live('input', function(){ 
 
    
 
$("#input-element").autocomplete(options); 
 

 
});