Erstellen von dynamischen Webformularen mit jQuery | Laurence Svekis | Skillshare

Playback-Geschwindigkeit


  • 0.5x
  • 1x (normal)
  • 1.25x
  • 1.5x
  • 2x

Erstellen von dynamischen Webformularen mit jQuery

teacher avatar Laurence Svekis, Best Selling Course Instructor

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

9 Einheiten (59 Min.)
    • 1. Promojqueryforms

      1:28
    • 2. jQuery und Formulare Kurs Einführung

      3:28
    • 3. HTML CSS-Kurs

      5:08
    • 4. jQuery Keyup Inhaltsübersicht in Formularfeld

      8:49
    • 5. Formular Rückgaberichtlinien bei der Änderung

      5:35
    • 6. jQuery Event AJAX Antwort vom Server

      9:09
    • 7. jQuery und radio und Kontrollkästchen

      10:43
    • 8. jQuery UI automatisches Vervollständigen

      7:14
    • 9. jQuery UI autovervollständigen aus der dynamischen JSON-Datei

      7:20
  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Alle Niveaus

Von der Community generiert

Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.

154

Teilnehmer:innen

--

Projekte

Über diesen Kurs

Erstellen Sie dynamische Webformulare mit
jQueryGuide zum Zugriff auf Formularinhalte und zur Verwendung der Daten in jQuery und JavaScript codejQuery ist eine großartige Möglichkeit, erstaunliche Funktionalität und dynamische Effekte auf Ihren Webseiten hinzuzufügen.
jQuery bietet große Funktionalität in Bezug auf Formulare und das Erstellen von Formularen ist eine wesentliche Fähigkeit in der Webentwicklung.

Zusammen mit HTML kann jQuery so viel tun.

Dieser Kurs deckt die Übereinstimmung mit zwei Formularfeldern ab, um zu überprüfen, ob der Inhalt der gleiche ist, was ein nützlicher Code-Snippet ist, um den Inhalt der Formularfelder zu belassen.

Verwenden Sie Kontrollkästchen, um Ereignisse wie check-boxes und mehr auszulösen. Die Check-Box Interaktion innerhalb eines Formulars ist ein dringend benötigtes Stück Funktionalität.

Lerne AJAX an den Server mit drop Checkboxen und checkboxes auslösen Ereignisse. Dynamische form ermöglicht es dir, jedem Benutzer ein individuelleres form zu bieten.

Fügen Sie jQuery UI automatisch hinzu und füllen Sie das Auto mit dynamischen JSON-Daten aus. JQuery UI verfügt über viele vorgefertigte Funktionen, die einfach zu Ihren Webprojekten hinzugefügt werden können.

Am Ende des Kurses hast du die Fähigkeiten und versteht, wie du jQuery in deiner Website anwenden kannst.

Ich stehe hier, um dir zu helfen, wie du deine eigenen Websites erstellen und bereit bist, alle Fragen zu beantworten, die du vielleicht hast.

JavaScript und jQuery sind gefragt, und das Lernen in der Verwendung von ihnen hilft dir, dich von der Menge zu trennen.

Willst du mehr wissen, worauf wartest du auf den ersten Schritt gehen. Beginne jetzt, um zu lernen, wie du auch jQuery in deiner Website heute nutzen kannst.

Triff deine:n Kursleiter:in

Teacher Profile Image

Laurence Svekis

Best Selling Course Instructor

Kursleiter:in

Web Design and Web Development Course Author - Teaching over 1,000,000 students Globally both in person and online.    Google Developer Expert since 2020 GDE

I'm here to help you learn, achieve your dreams, come join me on this amazing adventure today
Google Developers Expert - GSuite

Providing Web development courses and digital marketing strategy courses since 2002.

Innovative technology expert with a wide range of real world experience. Providing Smart digital solutions online for both small and enterprise level businesses.

"I have a passion for anything digital technology related, enjoy programming and the challenge of developing successful digital experiences. As an experienced developer, I create... Vollständiges Profil ansehen

Kursbewertungen

Erwartungen erfüllt?
    Voll und ganz!
  • 0%
  • Ja
  • 0%
  • Teils teils
  • 0%
  • Eher nicht
  • 0%
Bewertungsarchiv

Im Oktober 2018 haben wir unser Bewertungssystem aktualisiert, um das Verfahren unserer Feedback-Erhebung zu verbessern. Nachfolgend die Bewertungen, die vor diesem Update verfasst wurden.

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen

Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen bei Skillshare

Lerne von überall aus

Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.

Transkripte

1. Promojqueryforms: Jake ist eine gute Möglichkeit, Adam Mayes und Funktionalität und dynamische Effekte. Ponting Webseiten Bäckerei bietet große Funktionalität, wenn es um Formulare und das Erstellen von Formularen ist wesentliche Fähigkeiten mit Web-Entwicklung zusammen mit jedem Team Reforms Bäckerei in tun so viel eine der nützlichen Code-Snippets in diesem Kurs, Wir werden abdecken, wie man ah macht, Formular Feldprüfung. Vergewissern Sie sich, dass der Inhalt identisch ist. Außerdem werden wir Kontrollkästchen als Auslöser verwenden, und sie werden nützlich sein, wenn Sie Ihr Formular erstellen. Um diese Interaktion zu erstellen, lernen Sie, wie ein Jocks mit Dropdown-Werten an den Server aufruft. Kontrollkästchen Optionsfelder Um Ereignisse in Ihrem Web auszulösen. Dynamische Formularanweisung ermöglicht es Ihnen, jedem Benutzer eine benutzerdefinierte Formularerfahrung zu bieten , dann fügen Sie Geheimnis hinzu, dass Sie ich automatisch in füllen Auto, , komplett mit dynamischen Jason-Daten. J. Curry hat viele vorgefertigte Funktionen, die einfach zu Ihren Webprojekten hinzufügen und so viel Funktionalität hinzufügen können, bis dahin, natürlich, Sie haben die Fähigkeiten und wissen, wie man J coury innerhalb Ihrer Websites anwenden kann. Ich bin hier, um Ihnen zu helfen, Websites zu erstellen und bereit, alle Fragen zu beantworten, die Sie haben können . JavaScript und J coury sind gefragt Fähigkeiten und lernen, wie man sie benutzt, wird Ihnen helfen, von der Masse zu trennen . Wollen Sie mehr erfahren? Worauf wartest du? Machen Sie den ersten Schritt. Jetzt beitreten und lernen, wie auch Sie eine Abfrage in Ihren Webprojekten noch heute nutzen können . 2. jQuery und Formulare Kurs Einführung: Willkommen bei J. Curry und die Arbeit mit Form Fields Kurs. Und in diesem Kurs werde ich Ihnen zeigen, wie Sie einige wirklich erstaunliche Dinge tun, wenn es um Formen und Jake müde und all diese erstaunliche Interaktion, die Sie mit Shakeri erstellen können. Mein Name ist Lawrence, und ich bin seit über 15 Jahren Webentwickler. Und eines der Dinge, die ich immer genossen mit seiner Jake Sorge, es erstaunt mich wirklich , wie viele wunderbare Dinge, die Sie mit G Query tun können. Eines der Dinge, die Ihnen in diesem Kurs zeigen wird, ist, wie Sie ein Passwort-Matching-Feld erstellen . Also bemerkte ich, dass, bis die beiden Felder übereinstimmen, dann bekommen wir das hier abgestimmt und dann das Rot verschwindet. Wir werden auch untersuchen, wie man mit Kontrollkästchen arbeitet. Wir sehen also, dass wir auch das Radio gewechselt haben. Ja, Funkwechsel, um zu wissen, dass wir hier eine Aufforderung haben. Also, wenn wir dies deaktivieren und es viele verschiedene Szenarien gibt, um diese Art von Quellcode zu verwenden , und natürlich ist der Quellcode auch enthalten. Und dann kann ich bestimmte Teile meines HTML-Codes ausblenden und anzeigen. Und das Interessante daran ist, dass wir tatsächlich einen Mann Ajax-Anruf an den Server machen und dann ist dies die Antwort, die vom Server zurückkommt. Das ist eine andere Sache, die wir Ihnen im Laufe des Kurses zeigen werden, ist, wie man Daten über Ajax an einen Server sendet . Beachten Sie, dass wir keine Seite aktualisieren ihre und erhalten, dass Daten zurück und Ausgabe in unserem HTML-Code und dann, um zu beenden, werden wir auf G erstellen Sie suchen. Ich Es hat diese wirklich erstaunliche Komponente, wo wir eine automatische Vervollständigung machen können und wir werden dies eine Kerbe bringen, wo wir auch nicht nur automatische Vervollständigung, aber wir werden eine zufällige Liste von Namen von einem P I zufälligen Benutzer Punkt Emmy laden. Und wie wir hier sehen, ändern sich die Namen immer. Und das war nur eine Möglichkeit zu demonstrieren, dass wir eine Jason-formatierte Quelldatei für R A p I-Daten verwenden können und wir sehen, dass dies die Daten sind, die von dieser Website zurückgegeben werden und wir haben eine ganze Reihe von wirklich interessanten Daten, die zurückgegeben werden Hier hinten. Und natürlich können wir Thies verwenden, um Phil Namen und Informationen in unserem Drop-down-Menü richtig vorzustellen. So sehen Sie hier, wie wir in dieser G-Abfrage eingeben, dass wir diese Interaktionen ausgelöst haben und wir unsere Anfrage über Ajax an die Jason-Datei senden, das zurückziehen und diese als Objekte, nutzbare Objekte einrichten Füllen in einer Rate und dann Abschluss unserer Auto-Coat-Auto-Vervollständigung Abschnitt wo wir haben diese fallen gelassen und der Benutzer kann einfach beginnen, einen Namen eingeben und eine Reihe von Optionen für mögliche Namen erhalten . Also, natürlich brauchen wir Zehe Namen haben, die dort übereinstimmen, und dann könnten sie einfach auswählen und füllen Sie das Feld mit den heruntergelassenen Namen. Also all dies, und noch viel mehr der gesamte Quellcode ist in diesem Kurs enthalten. Sie sind also bereit zu gehen und beginnen, mit Ihrer G-Abfrage und Ihren Formularen einen wirklich erstaunlichen Code zu erstellen. Also lasst uns anfangen 3. HTML CSS-Kurs: in den nächsten Settle-Lektionen werden wir mit Formularen HTML-Formulare arbeiten und mit diesen Formularen und dem Inhalt innerhalb der Formulare mit J Abfrage interagieren . Es ist hier drüben. Ich habe hier einige grundlegende Formularfelder, also nur einige reguläre Felder. Eso Was wir tun werden, ist, dass wir Jake Worry verwenden, um eine Vergleichsübereinstimmung der Inhalte zu machen , die in einem Feld mit dem anderen platziert sind. Wir werden auch auf Ajax-Inhalte zugreifen. Wann immer es Änderungen an den Optionsfeldern gibt. Wir werden auch die Kontrollkästchen betrachten und wie sie funktionieren und passen in Jay Query und auch Dropdown-Auswahlmöglichkeiten. Und dann haben wir hier einen Knopf, auf den wir klicken können. Dies ist nur ein Hyperlink. Und dann habe ich hier noch ein Feld, das Name sagt. Also, was ich mit diesem machen möchte, ist, dass ich tatsächlich Auto Complete setzen möchte, und dafür werden wir J cree du ich verwenden, weil sie eine Auto-Complete-Komponente haben , so dass Sie im Grunde ein Drop-Down machen können und es gibt Ihnen eine Auswahl Option hier aus was? Die möglichen Optionen sind, also werden wir einige Inhalte mit Ajax und Jason Data ziehen, die in dieses Formularfeld für die automatische Vervollständigung ziehen, um einige Inhalte zu füllen. Also werden wir viele verschiedene Formularfeld-Aktionen in Bezug auf J-Abfrage und wie man mit den fremden Feldern arbeitet. Also werden wir auch Chrome als unseren Browser und Klammern als unseren Editor verwenden. Und natürlich können Sie Ihren eigenen Lieblingseditor auswählen. Und ich werde einfach schnell den HTML-CSS-Code durchlaufen, den ich hier und dann in der nächsten Lektion eingerichtet habe , oder einen Sprung direkt in die Arbeit mit diesem Code und die Arbeit mit Jake Worry. Also hier drüben, ich habe gerade ein paar grundlegende CSS. Also habe ich einige Abstände um die Dibs gemacht. Ich habe hier eine Klasse eingerichtet, die eine genannt wird, also im Wesentlichen, damit ich meinen Link mehr wie eine Schaltfläche aussehen lassen kann . Ich habe einen Ausgabebereich, also werde ich das nur verwenden, wenn ich Inhalte ausgeben muss. Ich habe zwei verschiedene Texteingabefelder hier, und ich werde einen Vergleich zwischen dem Inhalt dieser beiden Felder machen, so p S W a p s w b. Also vielleicht, wenn dies Passwortfelder waren, wollen wir sicherstellen, dass der Benutzer gibt ein Kennwort ein. Und wir machen einen schnellen Vergleich, nur um sicherzustellen, dass das Passwort genauso ausgefüllt wird wie im obigen Feld. Beide Felder haben also im Wesentlichen das gleiche. Ich habe noch einen hier auf I D für den Status. Wenn wir also einen Status zurückgeben müssen, weil wir eine Menge Kommunikation haben hin und her geht. Wir brauchen also etwas Platz hier auf unserer Webseite, um all diese Informationen ausgeben zu können. Also vielleicht könnte ich das sogar aktualisieren und es wahrscheinlich besser als div dienen, weil ich diesen Abstand um die Dips angewendet habe. So wird es ein wenig besser innerhalb der Webseite und dann darunter präsentieren. Hier. Ich habe ein Formular, also habe ich mein Eröffnungsformular nicht. Ich habe mein abschließendes Formular nicht, aber ich habe hier viele Formularelemente. Also habe ich meine Optionsfelder und ich habe einen Wert von yes Wert von no und waren im Grunde standardmäßig . Wir beginnen damit, dass hier keine Checkboxen vorhanden sind. Also etwas, wo wir vielleicht ein paar Daten senden, wenn es überprüft wird. Und vielleicht können wir auch die Ausgabe einer Notiz ausblenden oder anzeigen, wenn sie überprüft wird. Dies ist also ein paar verschiedene Demonstrationen der Funktionalität, mit denen Sie mit Kontrollkästchen arbeiten können , die nützlich sein könnten, wenn Sie Formulare entwickeln und dann natürlich Dropdowns. Also, wenn hier etwas aus der Dropdown-Liste ausgewählt wird, möchten wir eine Art von Aktion initiieren, weil wir tatsächlich nach dieser Benutzerinteraktion suchen und eine Antwort mit J-Abfrage bereitstellen und dann als nächstes hier drüben habe ich gerade bekam diesen Klick-Button. Also diese grobste Fähigkeit, Sie einen Ereignis-Listener hinzufügen oder eine Klickaktion haben und etwas auslösen , um innerhalb unserer Webseite geschehen. Und schließlich habe ich noch ein Textfeld hier, und ich habe gerade den Polizeiinhaber als Namen hier platziert. Und dieses Feld werden wir wahrscheinlich verwenden, um das Drop-down für die J Crew au I s O auch innerhalb des Codes hier zu machen . Also verlinke ich auf die J-Abfrage Cdn. Das ist also eine Google J. Corey-Bibliothek. So können wir darauf zugreifen und es in unserem JavaScript nutzen lassen. Und dann endlich kommen wir zu den Skript-Tags hier, und wir haben unsere dokumentenfertige Funktion einsatzbereit. Wann immer das Dokument geladen wurde, war bereit, mit einer Abfrage zu laden und zu arbeiten, und das ist eine Zusammenfassung des HTML-Codes und natürlich dient dies nur zu Demonstrationszwecken. Und das ist, was all diesen HTML-Code eingerichtet wurde, um diese Interaktion mit Jake Sorge zu erstellen . Also die nächste Lektion. Lassen Sie uns hineinspringen und anfangen, mit RJ Query zu arbeiten. 4. jQuery Keyup Inhaltsübersicht in Formularfeld: in dieser Lektion. Wir werden uns ansehen, wie wir diese beiden Passwortfelder zuordnen können. Letztendlich möchten wir, dass der Benutzer eintreten kann, ein Passwort eingeben und dann das Passwort erneut eingeben kann. Und wir wollen einen Scheck machen, um sicherzustellen, dass sie übereinstimmen. Und dann vielleicht eine Art Ausgabe hier innerhalb des Status, um entweder zu sagen, dass es übereinstimmt oder nicht übereinstimmt. Also gehen wir weiter und kommen zu R. J Craig Code. Also werden wir es nur auf Seite hier tun. Und das erste, was wir natürlich tun sollten, ist, ah aufzuspielen und an einem Ereignis-Listener für Schlüssel zu machen. Also werde ich mir das ansehen, in dem wir eingerichtet haben, was Passwort B ist und wir brauchen keinen Zuhörer für das Passwort A für das erste Feld, nur weil wir einen Vergleich machen werden. Wir gehen also davon aus, dass es einige Inhalte gibt und dass die Benutzer bereits ihre erste Version des Passworts ausgefüllt haben und dass wir nur eine Überprüfung machen würde es validieren nennen. Und wann immer der Schlüssel ausgelöst wird, werden wir unsere Funktion ausführen und die Funktionen validieren. Sie übermittelten keine Argumente. Und vielleicht nur um zu demonstrieren, dass die Dinge funktionieren, werden wir einen Text in diesen Status ausgeben, also in den Status I d und wir geben dort Text ein . Also muss ich das Zitat abschließen und vielleicht habe ich gerade die Arbeit für jetzt. Und dann werden wir das natürlich aktualisieren. Also die Idee hier ist, dass, wenn ich beginne, in PS WB-Feld zu tippen, das gerade hier die 2. 1 ist, als es sollte der Status, der zu arbeiten ändern sollte. wir einfach sicher, dass das funktioniert. Also hier sind unsere beiden Felder. Also in der 1. 1 können wir nehmen, was Sie wollen, weil es nicht angeschlossen ist. Aber sobald ich hier eintippe, sehen wir, dass der Status auftaucht, funktioniert. Also, das ist in der Tat, Arbeit. Und wir können unseren Code hier weiter ausbauen. Was ich also tun möchte, ist, dass ich diese Werte jetzt als Variablen einziehen möchte, natürlich müssen wir das nicht unbedingt einmal tun, weil wir unseren Vergleich auf beiden Feldwerten durchführen könnten . Aber um es lesbarer zu machen, werden wir es einfach so machen, wo wir diesen Wert von P s a W oder P S W A ziehen, indem wir diesen Wert einziehen und die Variable p S W ein verwenden, um diesen Wert zu enthalten. Also, der nächste, gehen wir zum selben Ding für das nächste Feld. Also, das war P S W B. So verwenden P S W ist eine kurze Form für Passwort und a und A B, um die beiden Felder zu unterscheiden. Also, jetzt haben wir die beiden Werte in RJ Query gezogen. Und jetzt lassen Sie uns einfach unseren Vergleich machen, weil wir diese Funktion jedes Mal abfeuern, wenn diese Taste überprüft wird. Was wir also tun wollen, ist ständig abfeuern, die Bedingungen machen, überprüfen und sehen, ob diese aktualisierten Felder übereinstimmen werden. Also werden wir gleich sein. Wir werden prüfen, ob P S W eins gleich P S W zwei ist. Wir werden es auch nach dem Typ eine Swell tun und natürlich ist es nicht 100% notwendig, aber es ist immer eine gute Praxis, um sicherzustellen, dass wir den Typ validieren, weil wir wollen , dass sie eine vollständige Übereinstimmung sein. Also, wenn es gültig ist, wenn es funktioniert, dann muss ich die Arbeit zu viel anpassen oder so etwas. Und dann natürlich hier eine neue Alternative, brauchen wir natürlich hier eine neue Alternative,so dass, wenn PS eins nicht gleich PS zwei ist, wir wollen, dass der Status nicht viel ausgibt. Schauen wir uns das an und sehen, wie das funktioniert. Also lassen Sie uns Test eingeben und dann keine Übereinstimmung, nicht übereinstimmen, , und dann geht davon aus, dass wir die beiden Felder übereinstimmen, die wir sehen übereinstimmen. Das könnte also etwas sein, wo wir es vielleicht hervorheben und lesen könnten oder so etwas , um Ihnen, äh, dem Benutzer zu sagen, dass er weiter tippen muss. Also, natürlich könnten wir reingehen und wir könnten Styling hinzufügen, wenn es nicht übereinstimmt, damit wir so etwas tun können,und dann , müssen wir das umschalten und entfernen, sobald es viel tut. Also vielleicht nicht der Status. Aber vielleicht könnten wir das zuerst auswählen. Oder wir könnten dort auch eine Klasse anlegen und die Klasse hervorheben und entfernen, dass so viele, die am besten geschrieben werden. Also werde ich diese Klasse hinzufügen. Ja, ich wollte es Match Field nennen. Im Wesentlichen werden wir es für immer verwenden, wenn wir übereinstimmen. Und lasst es uns bis zum 2. 1 hier machen. Also P s w b. Und wir werden die Methode Toggle Plus verwenden und vielleicht sollten wir so etwas wie Highlights machen . Also werde ich hier tatsächlich eine andere Klasse hinzufügen, und ich werde verwenden Ich glaube, wir haben ein Matchfeld eso für Highlight genannt und nehmen dieses, Kopieren Sie es und wenden Sie eine Art von Styling hier an, damit wir so etwas wie eine Hintergrundfarbe machen können und tun Sie lesen? Also sieh mal an und wir werden sehen, was jetzt passiert. Also jetzt, bis wir unser Spiel haben, werden wir sehen, dass es rot wird, aber nicht in der Tat, entfernen wir es. Also, was wir tun, ist, wenn wir es umschalten, sind wir es nicht. Es funktioniert also nicht genau perfekt mit dem Toggle. Vielleicht ist der Toggle vielleicht nicht der beste, und wir sollten uns einfach daran halten, die Klasse hinzuzufügen und zu entfernen, um sicherzustellen, dass wir es zur richtigen Zeit tun. Das ist also die Sache mit dem Schalter, weil wir ihn ein- und ausschalten. Manchmal ist es also nicht der beste Ansatz. Also vielleicht, was ich tun werde, ist, dass ich einfach Klasse hinzufügen und dann hier drüben einmal übereinstimmen. Dann entfernen wir die Klasse und was dies tun wird, ist, wenn diese Klassen dort, das wird es entfernen. Und wenn es nicht ist, dann füge ich es einfach hinzu. Also jetzt werden wir diese Klasse weiter hinzufügen, bis wir sie übereinstimmen. Und sobald wir keine Übereinstimmung haben, erhalten wir diese hervorgehobene Farbe. Und natürlich gibt es viele verschiedene Dinge, die Sie in vielen verschiedenen Funktionen hinzufügen können. Aber im Wesentlichen ist es wichtig, sich aus dieser Lektion daran zu erinnern, dass, sobald wir das Spiel getroffen haben, sobald wir den Schlüssel oben haben, hier s, also das ist das erste, was wir betrachten und wann immer es irgendeine Art von Schlüssel oben gibt Aktion innerhalb dieses Feldes, dann werden wir diese Funktion auslösen und innerhalb der Funktion auslösen. Wir machen nur eine schnelle Überprüfung hier und diese Funktion kann enthalten, was Sie enthalten möchten. und es durchläuft einfach die Funktionalität mit J Query, um mit der Logik übereinzustimmen, die wir auf dieses Feld anwenden möchten . Wir haben ein paar wirklich aufregende Sachen. Und natürlich natürlich mit Jake Worry. Alles ist immer wirklich interessant. Und es ist einfach erstaunlich, wie viele Effekte Sie mit nur ein wenig Code in J-Abfrage erstellen können . Also werde ich Ihnen sogar Mawr wirklich coole Dinge zeigen, die Sie mit Ihren Formularen tun können, wenn es um J Query geht. Und dann werden wir uns Jaker ansehen, Sie ich ein wenig, damit das alles in den nächsten Settle-Lektionen auftaucht . 5. Formular Rückgaberichtlinien bei der Änderung: in dieser Lektion. Wir werden uns auf die Kontrollkästchen konzentrieren und ist abgefallen. Wenn wir also etwas passieren wollen, wann immer wir das Drop-down-Menü machen und eine neue Auswahl getroffen wird oder wenn das Kontrollkästchen deaktiviert ist und normalerweise möchten Sie sehen, ob Sie eine Website hier haben und Sie möchten, dass jemand den Bedingungen zustimmt und Bedingungen, vielleicht möchten Sie nicht, dass sie in der Lage sein, mit dem Formular fortzufahren, bis sie ihm zugestimmt haben oder wenn Sie möchten, dass sie etwas durchlesen. Oder vielleicht möchten Sie nur einen Teil Ihres Formulars ausblenden, nachdem er es mit einem Kontrollkästchen ausgefüllt hat Vielleicht ist es nicht relevant für sie viele verschiedene Optionen und innerhalb dieser Lektion. . Also werden wir durchschauen, wie wir diese als Ereignisse auslösen können und dann natürlich natürlich eine Art aktuelles interaktives JavaScript dafür abfeuern oder Jake sich darum Sorgen machen. Also lassen Sie uns unseren Editor öffnen und beginnen, diese Verbindungen hier herzustellen. Das erste, was wir tun wollen, ist, dass wir es wollen. Vielleicht wird sich vielleicht auf die Auswahl konzentrieren, die ausgewählten Elemente, und wir haben bemerkt, dass wir hier zwei Optionen haben. Also vielleicht kann ich ein paar weitere Optionen hinzufügen, nur um es ein wenig interessanter zu machen. Das sollte auch noch sein. Sie sind so diese 13 diese 14 und vier und drei und nur neu ausrichten diejenigen verschönern diese s O , dass es lesbar ist, mehr vorzeigbar. Eso Das erste, was ich tun möchte, ist, meine Auswahl von denen zu treffen und zu bemerken, dass ich kein i d hier habe . Also, natürlich könnte ich ein I. D.hinzufügen D. und ich könnte die Auswahl dort treffen. Aber ich denke, was ich tun werde, ist, dass ich mit dem Elternteil, dem meinem Formular anfangen werde, und ich werde das ausgewählte Element innerhalb des My für Also auswählen, nur um die Dinge ein bisschen anders zu machen . Also meine Form und wählen, natürlich, Ich muss buchstabieren Auswahl richtig dort, und wir werden für eine Änderung darauf hören. Und dies ist ein weiterer Ereignishandler , JavaScript, der etwas auslöst, sobald dieses Ereignis tatsächlich innerhalb unseres Court ausgewählt wurde . Vielleicht ist das, was wir jetzt tun wollen, vielleicht, was wir tun werden, wir können hier mit diesem Ausgabeinhalt arbeiten und vielleicht etwas innerhalb dieses Inhalts ausgeben. Also, wenn es ausgewählt ist, werden wir bei der Ausgabe tun und wir werden etwas Text ausgeben und wir werden es tun. So gab es auch ein Konsolenprotokoll hier etwas. Also werde ich mich trösten, einige Informationen über die Auswahl ausloggen, also werden wir das Protokoll und das gesamte Objekt konsolen. Also speichern Sie das und gehen Sie zu einem Browser und wir werden sehen, was jetzt passiert. Also, wenn wir unsere Auswahl treffen und wir unser Element inspizieren sollten, öffnen Sie das einfach in unserem Konsul und sehen, was hier vor sich geht. Es ist nicht wirklich abgefeuert, also schauen wir uns unseren Code genauer an und finden es besser heraus. - Warum? Das ist nicht abgefeuert. Und wenn wir hier bemerken, dass ich diesen Hash vergessen habe, also versuchen wir es noch einmal und sehen, was passiert. Also, wenn ich die Änderungen mache, sehen wir, dass wir ausgewählt wurden und wir haben die Informationen, die wir dort ausgewählt haben. Wählen Sie also aus. Wir haben all die verschiedenen Optionen und so weiter. Also, was es tut, ist, dass es die gesamte Auswahl zurückgibt, so dass es egal ist, welche wir auswählen, zurückkehrte, dass sein Reifen einen Inhalt ausgewählt hat, was wir tun müssen , ist der ausgewählte Wert auszuwählen. Also, nur um v A. L, um den Wert zurückzugeben, werden wir sehen, was jetzt auftaucht. So erfrischend es. Wir sehen, dass wir den ausgewählten Wert erhalten. Und natürlich hätten wir das sogar in unsere Auswahl setzen können, nur um die Schleife zu vervollständigen. Es nimmt also diesen Wert und oder vielleicht fügen wir einfach diesen hinzu, um ihn auszuwählen, damit wir wissen dass das, was wir ausgewählt haben, und natürlich, dies wird sich jetzt ändern. Jedes Mal, wenn ich eine Auswahl treffe, sehe ich ausgewählt und den Wert, der ausgewählt wurde, sagen wir, Sie arbeiten mit dem Dropdown-Menü, der Auswahl-Dropdown-Liste. Und genau wie im vorherigen Beispiel, wenn wir dieses Ereignis ausgelöst haben, was auch immer wir hier tun, liegt das an uns. Was auch immer. Welchen Code wir zurückgeben möchten, welche Antwort wir zurücksenden möchten und welche Funktionalität wir einbauen möchten, wir bauen das einfach innerhalb dieses Blocks einen Code hier ein. Also die nächste Lektion, die wir in ein wenig detaillierteren Kontrollkästchen betrachten und wie man mit Kontrollkästchen arbeitet, und wir werden auch einige wirklich coole Funktionen innerhalb der J-Abfrage hinzufügen. Also, das kommt alles in der nächsten Lektion. 6. jQuery Event AJAX Antwort vom Server: in den vorherigen Lektionen haben wir uns angesehen, wie wir einige Ereignis-Listener zu unserem Formular innerhalb J beenden mit J Abfrage hinzufügen . Also diese Lektion möchte ich tiefer in das eintauchen, was wir tun können, wenn wir eine Interaktion auf unseren Formularen haben , und ich möchte es ein wenig interessanter machen. Also hatte ich vorher eine Frage über Nun, ich möchte eine Formularinteraktion haben, aber ich möchte einen Ajax-Anruf innerhalb dieser Form in Traktion tätigen. Also, was ich getan habe, ist, dass ich eine PHP-Datei eingerichtet habe. Es ist eine wirklich grundlegende Verengung dafür. Es nannte es nur Ajax dot PHP Und all das wird tun, ist, alle Daten aufzuheben die gepostet werden und im Wesentlichen zurückschicken. Also, was auch immer wir haben, wir posten als Name. Es wird das als Antworttext oder der Ausgabetext innerhalb des Ajax-Punkts PHP zurückgeben und dann verwenden wir Ajax in RG Query, um das aufzuheben. Und natürlich natürlich ist Ajax eines der besten Dinge. Aber fast die Lieblingsdinge an J Query ist, weil es es nur so einfach und einfach zu bedienen macht . Also hier haben wir unsere Form. Lassen Sie uns also seltsam im ersten Ereignis-Listener auf dem my clicker Element. Also werde ich etwas von diesem Code nach unten verschieben und das war von der letzten Lektion. Und schauen wir uns meinen Klicker an. Wie fügen wir einen Ereignis-Listener und einen neuen Ereignis-Listener hinzu, der auf Klicken wartet? Und natürlich müssen wir diesen Hash dort einschließen. Also auf meinem Klicker, wie wir in diesem Ereignis-Listener hinzufügen werden Also fügen wir hinzu, klicken Sie und dann haben wir eine Funktion hier. Und vielleicht wollen wir, anstatt die Funktion hier zu haben, werden wir eine separate Funktion erstellen, die den Ajax-Aufruf ausführen wird. Aber wir wollen auch entfernen. Ich würde, dass dieser Standard hier, weil, wenn Sie bemerken, dass mein Clicker ein Hyperlink ist, also müssen wir hinzufügen, dass die Verhinderung des Standardwertes ebenfalls entfernt wird. Das ist eines der Dinge, bei denen wir hier vorsichtig sein müssen, weil ich nicht will, dass das auf eine andere Seite geht. Also lasst uns das zuerst bauen und wir werden einfach den Standard e verhindern und dies wird diesen Standard entfernen , wo Hyperlink zu einer neuen Seite geht und dann vielleicht von hier aus wir einfach zu einer anderen Funktion aufrufen können . Und dann wird diese Funktion diejenige sein, die tatsächlich den Ajax-Aufruf ausführt. Lassen Sie uns eine brandneue Funktion einrichten und wie werden wir diese Funktion nennen? Vielleicht nennen wir es einfach Ajax und Passah. Einige Argumente, Passahdaten, so dass wir etwas haben, um mit ihren zu arbeiten und dann von hier wird auf die meine Ajax-Funktion aufrufen . Und natürlich werden wir ein paar Updates zu diesem S O machen müssen, denn jetzt wir einfach die Funktion anrufen und ich zeige dir, was ab und zu passiert, wir bauen uns dafür auf. Oh, vielleicht will ich das tun, ist dort einige neue Daten einrichten. Es ist ein neues Datenobjekt und hat einige Inhalte darin, weil wir in der PHP erwarten, dass wir einen Wert übergeben werden, der einen gebuchten Wert von name. Das werden wir tun. Richten Sie das hier ein und dann wollen wir vielleicht Passahdaten als Name oder so etwas machen. Also für jetzt, nehmen wir einfach den Namen aus diesem Textbereich, und ich werde hier einen Standardtest setzen. Also nehmen wir den Wert von meinem A und natürlich werden wir wahrscheinlich einige Updates dazu machen müssen, aber das war nur um zu demonstrieren, es zum Laufen zu bringen, und dann werden wir einige Updates daran vornehmen. Also werden wir den Wert von dort nehmen, also v a l, um den Wert zu holen. Jetzt werden neue Daten den Wert aus diesem Feld enthalten und übertragen, mit dem wir arbeiten. Und jetzt natürlich haben wir natürlichunseren Ajax-Anruf eingerichtet. Es wird wirklich einfach sein, das zu schicken. Das erste, was wir in Ajax brauchen, ist, dass wir die URL identifizieren müssen, an die wir sie senden . Das ist also Ajax PHP Komma getrennt. Also hätte das beinahe abgeschlossen. Sie spezifizieren die enge, die post sein wird, und wieder, dies muss um kommagetrennte Daten geviertelt werden und wir übergeben diese neue Datenvariable und auf Erfolg. Wir werden vielleicht eine Funktion hier ausführen, und ich kann das tatsächlich in, uh vielleicht nur eine vorerst ändern , und wir werden sehen, wie wir damit arbeiten werden, weil ich Daten in der Antwort vom Server verwenden wollte . Ein Ex, das du bist. Also bekommen wir all diese Informationen zurück. Wir können uns das genauer ansehen. Also Konsolenprotokoll und wir werden S h r tun und diesen Antworttext zurückziehen. So Konsole ausgeloggt, abgemeldet, und dann vielleicht auch innerhalb des Ausgabefeldes platzieren, so dass wir tatsächlich sehen können, dass zurückgezogen wird und dies in HTML zu tun. Also, , Teoh ändert die Dinge manchmal ein bisschen herum. Also Antworttext. Und dann können wir vielleicht auch etwas haben, wenn wir einige Fehler haben, die durchkommen und funktionieren, und wir werden alle diese Werte in diesen Szenenvariablen zurückgeben und diese, vielleicht werden wir nur Konsolen protokollieren, dass X Stunden mit Konsole . Loggen Sie sich das ganze Objekt aus, damit wir es genauer betrachten können. Wenn wir einige Fehler werfen, lassen Sie uns sehen, was passiert. Glaubst du, dass das funktionieren wird? Wir werden den Wert von meinem Test A abholen wenn wir auf die Schaltfläche „Mein Klicker“ klicken und versuchen, den an den Server zu senden, nehmen Sie ihn auf den Server und posten Sie ihm einen Wert, der diesen gesendet wurde und den zurück auf unsere Webseite zurückgeben . Werfen wir einen Blick auf das. Und natürlich haben wir eine Luft. Ihre Linie 66. Also habe ich das aus Versehen reingesteckt. Haben wir das nicht? Ich muss das nicht abschließen, denn das ist ein Objekt. Also sieh mal, was passiert. Also haben wir die volle Turnaround gemacht. Wir schickten über, Test schickte es an den Server. Und das ist diese Serverantwort. Und dann natürlich damit arbeiten, können wir natürlich damit arbeiten,und wir können es bei Bedarf aktualisieren. Also habe ich all diese Funktionalität funktioniert und bereit zu gehen, was? Was passiert jetzt, wenn wir tatsächlich Informationen weitergeben wollen? Also, wenn wollen zurück, vielleicht zwei, die nach unten Passahfest fallen, Das und vorbei, dass auf den Server. Eso, das könnten wir tun. Und es ist wirklich einfach, das zu tun, weil wir diese Funktion so eingerichtet haben, dass wir es können, wenn wir sie brauchen . Wenn nötig, können wir einen Wert innerhalb dieser Funktion senden und anstelle der Verwendung ist dies der Wert, den wir das Argument senden können, das dorthin gesendet wird. Also lasst uns die Dinge hier einfach ein bisschen austauschen. Und auch möchte ich diese Funktion ausführen, die meine Ajax-Funktion hat. Wenn wir also eine Änderung vornehmen, die wir ändern oder den Wert übersenden, schauen wir uns an, wie das funktioniert. Glaub also, wir haben diesen noch angeschlossen. Also sehen wir, dass das geschickt hat. Meine Option zwei besteht darin, einen Rundtrip zu machen, der zum Server zurückkehrt. Und dann dieser hier, indem er die gleiche Sache Rundreise zum Server macht diese Antwortinformationen zurückgibt. So wie das, was wir hier mit dem Klick auf die Option, die Dropdown-Optionen getan haben, können wir auch in diesem Ajax-Anruf mit anderen Check Me-Schaltflächen und Optionsfeldern arbeiten. Und auch, wir können viel mehr tun. Also all das kommt in der nächsten Reihe von Lektionen... Oh, das wird wirklich interessante Dinge sein, die wir mit Jay Query machen können. Und wir werden auch GE Cree sehen, warum auch, Also, das kommt alles 7. jQuery und radio und Kontrollkästchen: in dieser Lektion. Wir werden uns Checkboxen und Optionsfelder ansehen und wie Sie sie neben Jay Query verwenden und wie Sie sie funktional machen können. Also hier haben wir ein paar Checkboxen und was wir tun wollen. Letztendlich wollen wir uns das vielleicht anhören. Also schauen wir uns zuerst die Kontrollkästchen an und dann die Leser-Tasten. Wenn wir mich überprüfen, wollen wir vielleicht eine kleine Aufforderung auftauchen. Ah, und nur um zu bestätigen, dass die Benutzer ihre Wahl treffen. Also vielleicht, dass Überprüfen Sie mich, wenn es etwas löschen oder löschen war. Wir wollen eine Eingabeaufforderung auftauchen, und das wird wirklich einfach innerhalb der J-Abfrage zu tun sein. Das erste, was wir tun wollen, ist natürlich unsere Event-Zuhörer anzuschließen. Also muss ich es mit dem on-Ereignis-Listener tun. Also werde ich das tun. Es ist das gleiche, wie dies nur verschiedene Möglichkeiten ist, es zu schreiben. Und vorzugsweise laden Sie Ihre Veranstaltung. Hörer brauchen mehr als ein Ereignis, Lister. Wenn Sie Ihre Ereignis-Listener entfernen müssen, ist dies der bevorzugte Weg. Es ist Oh, ich schaue nur auf den Namen der I d also ist es mein Scheck. Das ist diejenige, die wir dem Zuhörer auch hinzufügen werden. Das ist also mein Scheck. Und der Ereignis-Listener wird den Ereignishandler auf das Element berühren und wir werden auf Veränderung hören. Und wenn diese Änderung stattgefunden hat, wollten sie unsere Funktion hier abfeuern. Jemand zuerst können wir einfach trösten, den Inhalt ausloggen. Eso 1. Wir werden nur Konsolenprotokoll rauskommen. Und vielleicht wird hier unten unten unten diese Ausgabebereiche aktualisieren, die Lieblings-Ausgabebereich , wo wir eine Ausgabe von HTML haben. Lassen Sie nur, damit wir wissen, dass tatsächlich etwas passiert ist, überprüft, halten Sie es wirklich einfach. Also und natürlich haben wir die Informationen, die in der Konsole erscheinen werden. Sobald wir es überprüft haben, sehen wir, dass wir überprüft werden und wir haben die Objektinformationen zurückgegeben. Und natürlich können wir damit arbeiten und diese Energieabfrage auch nutzen. Also möchte ich eine kleine Pop-up-Box hinzufügen, die mich einfach fragen wird, ob, wo, wenn , wo, wenn wir diesen Scheck machen wollen und es ist hier drüben. Was ich tun muss, ist, dass ich bestätigen muss, dass es tatsächlich ausgecheckt ist, weil ich nicht abfeuern möchte , wenn es nicht ausgecheckt ist. Also möchte ich sicherstellen, dass die Eigenschaft überprüft ist oder nicht Checker, aber es ist tatsächlich überprüft. Und wenn es überprüft wird, werden wir das abfeuern. Also, sobald diese Bedingung erfüllt ist, nun, vielleicht eine Variable einrichten, nur um zu sehen, ob das Benutzer-Shirt und das Abfeuern bestätigt. Tun Sie so etwas. Das wird also tun, das ist die Einrichtung unserer Aufforderung und wir machen es überprüft. Und wenn das überprüft wird, dann wird es gleich sicher sein. Werfen wir einen kurzen Blick und sehen, wie das alles zusammenpassen wird. Also erfrischen Sie es. Und wenn wir es jetzt überprüfen, bekommen wir diese Aufforderung, einige, die wir in Ordnung bringen müssen, um fortzufahren, also überprüfen wir es. Und wenn wir die Benachrichtigung abbrechen, dass das Häkchen weg war, so dass es die Überprüfung nicht wirklich abgeschlossen . So fügen Sie vielleicht hinzu, wie eine doppelte Überprüfung, oder um sicherzustellen, dass Sie haben, dass die Benutzer Sie die Aufmerksamkeit des Benutzers bekommen, dass Sie sicherstellen möchten , dass sie in der Tat wollen, um das zu deaktivieren. Eso Schauen wir uns dieses andere Kontrollkästchen an und lassen Sie uns etwas damit passieren. Und so, was ich tun will. Vielleicht möchte ich diese Ausgabe einfach ausblenden und anzeigen oder ich möchte einen Abschnitt ausblenden und anzeigen. Also öffnet es unseren Editor wieder, und ich möchte diesen Ausgabebereich wirklich hervorheben. Also werde ich ihm Hintergrundfarbe geben. Also vielleicht etwas, das wirklich auffällt, äh , gib ihm auch eine Grenze. Oder vielleicht könnte ich sogar zu Picks gehen oder so etwas und schwitzen um es herum. Mal sehen, was jetzt passiert. Also, sparen Sie das. Aktualisieren Sie es, weil ich wirklich möchte, dass dies auftaucht und hier wirklich auffällig sein möchte. Eso geht zurück in unseren Code und das wird wirklich einfach sein. Es werden also nur ein paar Zeilen Code sein. Das erste, was ich tun möchte, ist natürlich, natürlich, fügen Sie meinen Ereignis-Listener hinzu, damit ich ihn bei Änderung hinzufügen kann. Ich kann es auf Klick eso hinzufügen. Entweder wird einer abfeuern und nur um dir zu zeigen, dass es immer noch abfeuern wird. Aber ich möchte letztendlich nicht, dass es jedes Mal abfeuert, wenn es angeklickt wird. Ich möchte, dass es jedes Mal abfeuert, wenn sich dieser Knopf tatsächlich ändert. Deshalb werde ich auf Veränderung und wieder die Dinge noch mehr aufrühren. Ich gebe Ihnen noch mehr Möglichkeiten, was wir mit dem Scheck machen können. Also werden wir, anstatt es zu tun, dieses Format, wir werden es auf diese Weise tun. Also machen Sie einfach die On Click-Funktion in diesem. Und natürlich, wenn Sie ältere Browser verwenden, sollten Sie versuchen, diese Art von Format zu vermeiden. Aber beide werden in Chrome funktionieren. So oder so, und dann, natürlich, wenn Sie sich dynamisch in Ereignis-Listern verstecken, normalerweise, dass dies der beste Weg ist. Aber es gibt Variationen, die Sie auch tun können. Also Konsolenprotokoll. Und eigentlich sollte ich das ändern, um es zu ändern, weil wir bereits über Click gesprochen haben. Also, wenn sich das ändert, dann werden wir sicherstellen und diese doppelte Überprüfung durchführen, um zu sehen, ob es überprüft wird und ob es ausgecheckt ist , als was wir tun werden, ist eine Auswahl aus der Ausgabe zu machen. Und wir werden diese eingebaute Showmethode machen und hier raus und sonst hier und genau das Gegenteil tun . Wenn es also nicht markiert ist, als was wir tun werden, ist es einfach zu verstecken und es einfach zu verschönern, machen Sie es ein bisschen mehr Grund lesbar. Also mal sehen, wie das funktioniert. Also, jetzt können wir es verstecken. Wir können diesen Ausgabe-Abschnitt einfach durch Ankreuzen einer Schaltfläche oder ein Häkchen eines Kontrollkästchens anzeigen. Und auch für die Radios. Sie sollten die Änderung anstelle des Klicks verwenden, da wir möchten, dass sie auf Leigh ausgeschaltet wird, wenn es eine tatsächliche Wertänderung gibt. Es gibt o nur, um Ihnen zu zeigen, dass man wirklich schnell auch. Und mit den Optionsfeldern haben wir ihnen keine i d s s gegeben also werden wir es benutzen. Wir werden eine Auswahl davon mit den Eltern treffen, und ich glaube, die Eltern sind meine Form, und wir werden nach Eingangs-Radio suchen und diese Funktion abfeuern. Und vielleicht für den Moment, was wir tun wollen, ist nur etwas in dieser Ausgabe zu aktualisieren. Also einfach Radio geändert. Also die Schule wieder niedlich und erfrischen Sie es. Also, jedes Mal, wenn diese Änderung würde sehen, dass Radio hat sich geändert. So kann auch sein, was Sie tun möchten, ist tatsächlich den Wert von Ja und Nein zu bekommen. Das ist also auch wirklich einfach. So können wir einfach Radio geändert und diesen Wert in ihrer auf hinzufügen. Und dann natürlich können wir natürlichden Wert des aktiven Elements erhalten, indem wir dies tun. Also werde ich das auswählen und den aktiven Wert davon auswählen. Mal sehen, ob das funktioniert und Radio sich auch geändert hat. Ja, Funkwechsel, um es zu wissen. Jetzt haben wir alle ihre Funktionalität da drin, und natürlich können wir das tun. Wir können diese Ajax-Anrufe genauso einfach an einen von diesen anhängen. Ein Schwung, wie wir es vorher getan haben. Also, wenn ich diesen Ajax-Anruf anhängen will, könnte ich natürlich auch die Buben Kohle dort reinlegen. Aber lass es uns einfach so machen. Wo, und ich habe eine Variable für Ergebnisse, also muss ich das weiter ausgeben und das aktualisieren, um auch zu Ergebnis zu kommen. Also, eigentlich, ich denke, wir sind bereits draußen, um ihre in diesen Anruf zu setzen. Also werden wir tatsächlich zwei Ausgänge dort ausgeben. Vielleicht können wir stattdessen den Status entführen. Aktualisieren Sie also den Status. So sehen wir, dass wir jetzt die volle Reise dort gemacht haben. Hin- und Rückfahrt. Wir haben den Status dieses Radios geändert auch aktualisiert. Ja. Und natürlich das Gleiche. Wenn Sie es in diese Kontrollkästchen hinzufügen möchten, wählen Sie Kästchen alle gleich, wir können einfach hinzufügen, dass Ajax es nennen. In der nächsten Lektion werden wir uns J coury ansehen, du klug. Das ist diejenige, auf die wir alle gewartet haben. Und das wird wirklich interessante Lektion sein, und das kommt als Nächstes. 8. jQuery UI automatisches Vervollständigen: in dieser Lektion. Ich möchte einen Blick auf die J Coury werfen. Du, ich und gerade durch das, Ich merke, dass ich Jake Ray nicht wirklich benutze ich so viel wie ich sollte, weil es wirklich cool ist. Es gibt Ihnen die Fähigkeit, all diese Rechte der Box, eingebaute Funktionen schwächen, tun Akkordeon, Auto, komplette Taste Datum Picker, Fortschrittsleiste und nur eine ganze Reihe von wirklich coolen Sachen. In dieser Lektion werden wir uns also mit der automatischen Vervollständigung beschäftigen und im Wesentlichen, was die automatische Vervollständigung genau so macht, wie der Name schon sagt. Sobald Sie mit der Eingabe beginnen, wird es nach einigen Ergebnissen suchen, die mit dem übereinstimmen, was Sie eingeben. Dies ist integriert und ermöglicht es Ihnen, schnell eine Liste von Werten zu füllen. Und das ist wirklich gepflegte Funktionalität. Und wie gesagt, ich wünschte, ich würde Jake Rate Sie ich bin verwenden, oder weil es so viele erstaunliche Stücke von Funktionalität, die nur direkt aus der Box gebaut werden. Also, um auf Jake Ray zugreifen zu können, können, werden wir zuerst hinzufügen. Wir gehen nur zu Google hier, um ihre gemeinsamen Bibliotheken aufzunehmen, und ich werde diese für J coury you I Also es kommt mit CSS, weil wir wollen , dass Styling dort haben . Und natürlich können Sie es selbst stylen. Also werde ich das einfach hinzufügen und es hier zurückgehen und die G-Abfrage hinzufügen. Sie ich auch, Also ich mag in der Regel die J Corey zuerst und dann die J Coury U Y-Bibliothek zu setzen. Und dann gibt mir das vollen Zugriff auf beide. Und jetzt kann ich anfangen, die J coury Sie ich zu verwenden und zu nutzen und eines der Dinge, die ich für eine automatische Vervollständigung brauche, ist tatsächlich einige Daten. Ich könnte offensichtlich ein Array hier erstellen, also haben sie hier ein wirklich gutes Beispiel, wo sie ein Array verfügbarer Tags erstellen, und dann verwenden sie einfach diese Tags, stecken Sie es hier in das Widget, und es setzt sie als Tags. Also werden wir diesen einen Schritt weiter machen und unsere verfügbaren Tags aus dem zufälligen User Dot Emmy ziehen lassen. Und nur um Ihnen zu zeigen, was diese Website tut, ist es im Wesentlichen gibt uns eso. Es ist Zufallsbenutzer Emmy. Aber das ist die A p I, die uns eine Liste von nur einigen zufälligen Benutzern gibt. Es ist eine wirklich gepflegte Website, besonders wenn Sie einen praktizierenden Code entwickeln. Wir sehen, dass wir diese zufälligen Benutzer im laufenden Betrieb bekommen können. Und wieder, es ist wirklich nützlich, wenn Sie Entwicklung machen, so dass Sie nicht die Mühe machen müssen , tatsächlich Benutzer erstellen Jason-Dateien und Daten zu erstellen. Also werden wir das einfach analysieren und herausfinden, was wir brauchen, um die Benutzernamen zu holen . Also vielleicht gehen wir mit den Ergebnissen von 50. Also lasst uns anfangen. Und was ich tun möchte, ist, dass ich hier auf diesem Gebiet arbeiten möchte. Also dieses Testfeld, was ich passieren möchte, ist ein Dropdown-Menü zu haben, beginne diese Daten auszufüllen und dann tatsächlich diese Dropdown-Liste zusätzliche Namen vorschlagen zu lassen. Und dann, natürlich, jedes Mal, wenn ich neu lade, dass ein p ich wieder andere Liste von Namen. Dies ist also wieder für Demonstrationszwecke. Wahrscheinlich wollen sie keine Verschiebung nach unten haben. Vielleicht tun Sie das, aber damit werden wir in diesem Beispiel arbeiten, weil wir jedes Mal eine zufällige, sich ständig ändernde Listen haben, wenn ich sie aktualisiere, wir haben eine neue Liste, also möchte ich Sie nur darauf aufmerksam machen. Und deshalb werden wir eine differenzierende Liste haben, während wir durchgehen. Also, was ich tun möchte, ist zu öffnen und hinzuzufügen. Vielleicht können wir tatsächlich in einem völlig separaten Feld hier s hinzufügen, so dass wir nicht stören, was wir vorher getan haben. Also richte DIV-Klasse ein und ich werde es dir geben, was es, weil ich auch die J-Abfrage CSS verwende . Und ich mache es ähnlich wie das, was sie getan haben, wo ich mein Label habe, und ich bekam einen Anruf, dass der Feldsucher mich durchsucht und das Label abschließt und jetzt meine Eingabe einrichtet und alles, was ich tun muss, ist, ihm einen I. D zu geben D wo ich mein Label habe, und ich bekam einen Anruf, dass der Feldsucher mich durchsucht und das Label abschließtund jetzt meine Eingabe einrichtet und alles, was ich tun muss, ist, ihm einen I. D zu geben. Wir haben es bereits identifiziert, dass wir es suchen oder ihre innerhalb der Etiketten würden nur dabei bleiben. Und da gehen wir hin. Das gibt uns also die Arbeit mit der Feld-Zehe. Und jetzt, wenn wir anfangen, in das Feld zu tippen, werden wir versuchen, das automatisch zu vervollständigen. Also werden wir eine Variable einrichten. Diese Variable ist also, wo wir unsere Werte halten werden. Also vielleicht werden wir einfach ein Array einrichten, und so werde ich in dieses Array ein B c setzen, so dass wir nur einige Startdaten haben um sicherzustellen, dass alles richtig funktioniert. Also mach einfach so etwas. Und jetzt werden wir diese Magie verwirklichen lassen. War J mutig, dass ich sie so durchsucht habe, und wir werden die automatische Vervollständigung und unsere Quelle einsetzen, damit das die Quelle der Daten sein wird . Also benutzen wir dieses, äh, dieses Array hier und dann haben wir hier einige Optionen. Also, wenn wir wollen mehrere Optionen, mehrere Drop-Downs, mehrere Elemente und müssen übereinstimmen, können wir auch eine Übereinstimmung auf den Fall. Wir werden das falsch machen, weil wir dort nicht wirklich viele Details haben. Mal sehen, was jetzt passiert, also werde ich es auffrischen. Und jetzt bekommen wir unsere Drop-down-Liste da unten. Also das funktioniert s o. Jetzt müssen wir alles tun und wie ich schon sagte, es sind nur die Salamis und Sie bekommen all diese Funktionalität direkt aus der Box. Im Wesentlichen was? Ich habe hier getan, ist, dass ich mein verfügbares Tag-Array eingerichtet habe und die automatische Vervollständigung eingerichtet habe. Und dann habe ich das einfach angemacht. Mannes. Stellen Sie sicher, dass meine Tags dort übereinstimmen und das ist alles, was wir mit Teoh tun müssen. Bringen Sie die automatische Vervollständigung an. Aber ich möchte diesen einen Schritt weiter machen, weil ich dieses Array hinzufügen möchte, dass wir den Ajax-Aufruf verwenden können . Weil ich mich natürlich sehr auf Ajax konzentrieren wollte. Also wollte ich das mitbringen, also werde ich dir zeigen, wie du das in der nächsten Lektion machen kannst. 9. jQuery UI autovervollständigen aus der dynamischen JSON-Datei: Wenn ich das, was wir in den vorangegangenen Lektionen gelernt haben, möchte ich das auf das anwenden, was wir jetzt tun werden. Also in der letzten Lektion haben wir uns angesehen, wie Geek, wo Sie warum funktioniert, wie einfach wir eine automatische Vervollständigung hinzufügen können . Und jetzt werden wir das einfach verbessern, indem wir unser Array hier dynamisch verändern. Standardmäßig haben wir also eine wirklich grundlegende Arrayed eingerichtet, so dass ich nicht viele Daten habe, aber ich möchte in der Lage sein, diese vollständige Liste von zufälligen Benutzernamen zu ziehen und diese zu nutzen und diese tatsächlich in mein ar e zu schieben. Also schauen wir uns das an und sehen, wie das funktionieren wird. Eines der Dinge, die sie brauchen, ist ein Ereignis-Listener, um sie zu durchsuchen. Das ist also, was ich tun werde. Ich werde den Sucher machen, und ich werde den Schlüssel benutzen, weil ich will, sobald jemand tatsächlich etwas geändert hat, er seinen Finger vom Schlüssel gehoben und der Schlüssel ist wieder aufgetaucht. Das ist, wenn ich renne und renne. Diese Funktion ist das meine optimale Zeit, um diese Funktion auszuführen, und ich muss tatsächlich den Wert aufnehmen, der innerhalb dieses Ergebnisses sein wird. Also werde ich es als Suchtext eintragen, und ich werde das hier platzieren, aber wir könnten es nicht. Ich denke gerade darüber nach, dass wir das möglicherweise nicht nutzen müssen, weil die tatsächlich die automatische Vervollständigung sich um eine Menge davon kümmert. Aber wenn wir unsere eigene automatische Vervollständigung aufbauen wollen, wenn wir eine Datenbank suchen und wir definitiv diesen Suchtext aufnehmen und ihn verwenden müssten . Wenn Sie also nicht die automatische Vervollständigung verwenden, dann müssen Sie wahrscheinlich diesen Wert einrichten. Und ich bin mir nicht sicher, ob ich es nicht glaube. Ich glaube nicht, dass wir das jetzt einrichten müssen, also werde ich weitermachen und den Wert vom Array zurücksetzen und auf eine Länge von Null setzen. Und dann ist dies, wo wir in Ajax und Ajax in J. Query ist einfach und einfach zu bedienen. Das erste, was wir tun müssen, ist aufzustellen. Bist du Earl? Es ist also in unserem Browser, und das ist das Mädchen, das wir benutzen werden. Also, springen Sie zurück und fügen Sie das hier in dieses Objekt und unseren Datentyp ein. Also, das ist Jason-Datentyp. Also muss ich angeben, dass wir Jason Data erwarten und auf Erfolg. Also unsere Erfolgsfunktion hier, es wird all diese Daten zurückziehen, und jetzt müssen wir sie nur nutzen. Lassen Sie uns also eine schnelle Konsole von den Daten abmelden, nur um sicherzustellen, dass wir alles aufnehmen und dass wir es nutzen können. Also sieh mal, was jetzt hier passiert. Und jetzt, wenn ich hier eintippe, machen wir eine Abfrage in diesen zufälligen Benutzer Emmy. Und wir haben dieses Objekt-Array von 50 verschiedenen Objekten und wir haben alle diese Namen hier. Also haben wir Vor- und Nachnamen. Vielleicht sehen wir uns den Vornamen an und versuchen ihn automatisch zu bevölkern. Also, wenn ich in T tippe, die ich sehen sollte, sollten Tammy und ich eine vollständige Liste möglicher Namen sehen, die ich verwenden möchte Dropping dort unten . Gehen wir zurück in unseren Code und werden tatsächlich eine Menge von diesem anderen Zeug loswerden weil wir es eigentlich nicht mehr brauchen. Vielleicht behalten Sie das. Könnte nur für den Fall dort setzen und dies weiter ausbauen. Werfen wir einen Blick auf den Erfolg hier. Also, jetzt haben wir auf Objekt Genug Arbeit durch jedes einzelne Ergebnis dort. Also machen Sie einfach Daten und Ergebnisse. Also ziehen wir alle Ergebnisse zurück, die von unserem Ajax-Aufruf zurückgegeben werden und was eine Funktion hier ausführen wird. Also haben wir unseren Schlüssel. Wir haben unseren Wert, und wir müssen ihn in unser Array schieben. Also haben wir gerade unser Essen oder Regen auf den Nullpunkt gesetzt. Eso muss einige Werte dort drinnen schieben. Also v Name zuerst und was das tun wird, ist dies wird durch alle diese Objekte Schleife und füllen acht unser Array mit allen Vornamen. Und nur um Ihnen zu zeigen, was hier passiert ist, wir eigentlich Will Consul abgemeldet. Es ist so, wenn wir fertig sind, die Sorge aufzubauen, Konsul hat es protokolliert. Wir könnten auch einen Blick in die Konsole werfen. Es ist also die Auffrischung, die. Und jetzt, wenn ich mit der Eingabe beginne, sehe ich, dass ich diese vollständige Liste von Namen bekomme, die ich Zugang zu haben Dies ist im Wesentlichen unsere neue Rate. Und ich könnte wirklich leicht einige Änderungen hier nur durch das Drop-down-Menü vornehmen. Und wie ich schon sagte, das ist Ah, zufällige Marie. Also haben Sie vielleicht nicht unbedingt eine zufällige Marie, mit der Sie arbeiten. Jedes Mal, wenn ich hier Schlüssel erstelle, werden wir abfragen und wir werden eine brandneue Reihe von Namen bekommen, also denke ich gar nichts. Sie fangen mit der Q-Hilfe an, Got A ist drin. Und natürlich können wir das nicht. Wir können dies wirklich nach Bedarf innerhalb unseres Codes s anpassen Oh, das zieht wieder aus einem zufälligen Benutzerarray heraus und gibt uns nur eine vollständige Liste aller dieser Namen aller 50 Namen. Wir legen sie in Honore ab und verwenden dann nur das innerhalb J coury Auto vervollständigen Sie I Das ist, wie wir in der Lage sind, auf Auto-Vervollständigung zu erstellen. Und natürlich, jedes Mal, wenn wir es neu laden, laden wir einen neuen Satz von Benutzernamen, und dann könnten wir einfach auswählen und unsere Auswahl aus der Dropdown-Liste treffen, und das füllt automatisch dieses Feld die Möglichkeiten für so etwas. Es gibt viele verschiedene Dinge, die Sie tun können, während Sie mit diesem trainieren und wirklich automatisch G. Koury vervollständigen . Warum sind viele wirklich große eingebaute Funktionalität und schalten sie dann ein und bringen sie auf eine Rate, die Ajax in diesen eso genannt wird, die unsere Form wirklich dynamisch und bevölkert macht. Also ermutige ich Sie, sich das anzusehen. Und natürlich können Sie die Assets in demselben Format verwenden, in dem Sie Ajax-Aufrufe verwenden oder nicht . Möglicherweise haben Sie etwas, das hart codiert ist oder ein Array, das Sie von Ihrem Server abholen. Schon wieder Eso. Je nachdem, was Ihr Szenario ist, können Sie verschiedene Arten von Logik anwenden und einige wirklich interessante Ergebnisse erhalten, wenn es um Ihre Formulare und G-Steinbruch geht.