jQuery Funktion neu aufrufen

  • JavaScript

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • jQuery Funktion neu aufrufen

    Hallo,

    ich habe mittles jQuery nun eine Art "Autocomplete" für meine Textfelder eingebaut.
    Das ganze sieht so aus:

    HTML-Quellcode

    1. <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    2. <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    3. <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    4. <link rel="stylesheet" href="/resources/demos/style.css">
    6. <script>
    8. $(function() {
    9. var availableTags = [
    10. "ActionScript","AppleScript","Asp","BASIC","C","C++","Clojure","COBOL","ColdFusion","Erlang","Fortran","Groovy","Haskell","Java","JavaScript",
    11. "Lisp","Perl","PHP","Python","Ruby","Scala","Scheme"];
    13. $( ".tags" ).autocomplete({
    14. source: availableTags
    15. });
    16. });
    18. </script>
    Alles anzeigen
    Wenn ich also jetzt ein Textfeld mit dem class-name "tags" habe, wird mir dort immer passende Vorschläge angezeigt, wenn ich was eingetippt habe.

    Nun zu meinem Problem:
    Ich habe Plus- und Minusbuttons um mehrere Textfelder mittels Javescript hinzuzufügen bzw. zu entfernen.
    Und bei den neu hinzugefügten Textfeldern funktioniert dann leider der Autocomplete nicht mehr, obwohl diese Textfelder derselben Klasse angehören.

    Ich vermute, dass man diese jQuery Funktion dann nur noch einmal neu aufrufen muss, damit der Autocomplete wieder auf alle Textfelder angewendet wird, kann das sein?


    Falls dem so ist: Wie mache ich das?
    Falls dem nicht so ist: Wie wird es sonst gelöst? :)

    Ich hoffe, jemand kann mir da weiterhelfen. :)

  • Aufgrund der Tatsache, dass du jquery-ui einbindest und die typischen Befehle nutzt gehe ich mal davon aus, dass du weniger das autocomplete selber gebaut hast, sondern die autocomplete function von jquery-ui nutzt ;)

    Zu deinem Problem, ja du musst das danach erneut aufrufen.
    Deine Autocomplete function wird einmalig beim Laden der Seite aufgerufen. Daraufhin fügst du vermutlich dynamisch weitere inputs hinzu. Allerdings lädst du die Seite nicht neu, somit kann natürlich autocomplete nicht nochmal greifen.
    Ich würde mir dieses jsFiddle dazu angucken: Edit fiddle - JSFiddle
    Wie man dort sieht wird einerseits auf das intiale Input ein autocomplete gesetzt.
    Andererseits wird innerhalb der "add-input" Funktion abschließend ebenfalls das autocomplete aufgerufen.
    Als Tipp: Beim nächsten Mal etwas mehr Sourcecode zur Verfügung stellen =)

  • Wusste jetzt nicht, ob der andere Code dafür auch noch relevant ist. ;)

    Aber ich habe das Problem gelöst.
    Habe einfach in der Javascriptfunktion, die ein neues Textfeld hinzufügt, nochmal folgenden Code hinzugefügt:



    JavaScript-Quellcode

    1. $(function() {
    2. var availableTags = [
    3. "ActionScript","AppleScript","Asp","BASIC","C","C++","Clojure","COBOL","ColdFusion","Erlang","Fortran","Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP","Python","Ruby","Scala","Scheme"];
    5. $( ".tags" ).autocomplete({
    6. source: availableTags
    7. });
    8. });

    Naja, und jetzt gehts! :)
    (Hätte ich ja auch mal eher drauf kommen können... :whistling: )

  • Je mehr Code desto besser ;)
    Im konkreten Fall ging es aber auch relativ leicht so.
    Schade, ich habe nicht den Eindruck, dass du meinen Post vollständig gelesen hast.

    Du kannst das zwar so machen und nicht so wie vorgeschlagen, der Nachteil dabei ist allerdings, dass du jedes Mal auf alle Elemente anwendest. Wenn du nachher 100.000 hast und ein weiteres hinzufügst, dann iteriert er wieder über alles drüber, anstatt nur bei dem einen Element das autocomplete anzuhängen.
    Der Einfachheit halber kannst du es aber natürlich im Moment so machen, da ich davon ausgehe, dass du das Ganze eher zu Trainingszwecken und weniger auf Optimierung hin ausprobierst.
    Empfehlenswert wäre es allerdings noch wenn du einen erneuten kleinen Blick in das jsFiddle wirfst und dir die options anguckst.
    Bei dir ist es so, dass du an zwei Stellen das Array availableTags hast. Das ist erstens unnötig und kann zweitens bei großem Code schnell dazu führen, dass du bei Änderungen der Ergebnisliste nur die eine Quelle und nicht die andere Quelle änderst und schon haben wir inkonsistente Daten.
    Für die Zukunft würde ich mir übrigens auch eher die entsprechenden ajax-requests anschauen, da es in den seltensten realen Fällen vorkommt, dass du eine so einfache definierte Liste hast, die du hart im Programmiercode hinterlegen kannst. Über einen request wird entsprechend der Eingabe ein gefiltertes Ergebnisset aus der Datenbank zurückgegeben, welches dann als Vorschlag an den Benutzer weitergegeben wird. Dynamisch halt ;)

  • Zunächst einmal sehe ich es nicht zwingend so, je mehr Code, desto besser.
    Zu viel Code kann ja auch verwirren, und ich dachte mir, sich auf das Wesentliche zu konzentrieren macht es überschaubarer. ;)
    Wenn bestimmter Code erwünscht ist, kann man ihn ja immernoch posten. ;)

    Bei meinem Projekt reden wir nicht von 100.000 Einträgen sondern von maximal vielleicht 30 Einträgen.
    Werde mir aber den Code da dennoch mal ansehen, kann ja nicht schaden. ;)

    Und das Array oben war nur ein Beispiel. ;)
    Natürlich habe ich die Vorschlagsliste nicht so im Programmcode stehen, die wird schon dynamisch aus der Datenbank geholt. ;)