{"id":24383,"date":"2021-05-17T10:54:00","date_gmt":"2021-05-17T07:54:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24383"},"modified":"2021-10-18T02:41:30","modified_gmt":"2021-10-17T23:41:30","slug":"so-verwenden-sie-jquery-autocomplete-mit-ajax-with","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/de\/so-verwenden-sie-jquery-autocomplete-mit-ajax-with\/","title":{"rendered":"So verwenden Sie jQuery Autocomplete mit Ajax With"},"content":{"rendered":"

M\u00f6chten Sie jQuery Autocomplete in Ihre Website integrieren? jQuery Autocomplete ist wie die Google-Suche, bei der ein Benutzer einige Buchstaben eingibt und die Ergebnismenge, die mit eingegebenen Buchstaben \u00fcbereinstimmt, vorab ausgef\u00fcllt wird.<\/p>\n

jQuery UI<\/a> bietet Autocomplete-Funktion. Um diese Funktion zu verwenden, m\u00fcssen Sie die von ihnen bereitgestellten JS- und CSS-Dateien verwenden.<\/p>\n

In diesem kurzen Tutorial nehmen wir ein kleines Beispiel und zeigen Ihnen, wie Sie jQuery Autocomplete mit Ajax verwenden.<\/p>\n

Nehmen wir als Beispiel ein Textfeld. Wenn ein Benutzer beginnt, einen Buchstaben in dieses Feld einzugeben, sollten vorab ausgef\u00fcllte Daten angezeigt werden, aus denen der Benutzer einen bestimmten ausw\u00e4hlen kann.<\/p>\n

So verwenden Sie jQuery Autocomplete mit Ajax<\/h3>\n

Nehmen wir an, unser Textfeld ist f\u00fcr den Vornamen eines Benutzers. Sie m\u00fcssen nach dem Vornamen suchen und Namensaufzeichnungen werden in der Datenbank gespeichert.<\/p>\n

Erstellen Sie eine index.html<\/code>Datei und f\u00fcgen Sie den folgenden Code darin ein.<\/p>\n

<html>\n<head>\n\u00a0\u00a0\u00a0\u00a0<title>jQuery Autocomplete<\/title>\n\u00a0\u00a0\u00a0\u00a0<link rel=\"stylesheet\" href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.4.1\/css\/bootstrap.min.css\" integrity=\"sha384-Vkoo8x4CGsO3+Hhxv8T\/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh\" crossorigin=\"anonymous\">\n\u00a0\u00a0\u00a0\u00a0<link rel=\"stylesheet\" type=\"text\/css\" href=\"\/\/code.jquery.com\/ui\/1.12.1\/themes\/base\/jquery-ui.css\">\n<\/head>\n<body>\n\u00a0\u00a0\u00a0\u00a0<div class=\"container\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"row\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"col-md-2\"><\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"col-md-8\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label for=\"exampleInputFname\">First Name<\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"text\" class=\"form-control\" id=\"fnames\" placeholder=\"First Name\" name=\"fname\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"col-md-2\"><\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0<script type=\"text\/javascript\" src=\"https:\/\/code.jquery.com\/jquery-1.12.4.js\"><\/script>\n\u00a0\u00a0\u00a0\u00a0<script type=\"text\/javascript\" src=\"https:\/\/code.jquery.com\/ui\/1.12.1\/jquery-ui.js\"><\/script>\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.4.1\/js\/bootstrap.min.js\" integrity=\"sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6\" crossorigin=\"anonymous\"><\/script>\n<\/body><\/code><\/pre>\n
Im obigen HTML habe ich dem Suchfeld die ID "fnames" gegeben. Auf dieser ID w\u00fcrde ich die Autocomplete-Methode aufrufen.<\/p>\n
Als N\u00e4chstes schreiben wir JavaScript-Code, der die Autocomplete-Methode verwendet, ruft die Ajax-Datei auf, holt die Antwort aus der Ajax-Datei und h\u00e4ngt sie an das Suchfeld an.<\/p>\n
<script type=\"text\/javascript\">\n\u00a0\u00a0\u00a0\u00a0$(function() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$(\"#fnames\").autocomplete({\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0source: function(term, response){\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$.getJSON('search.php', { q: term }, function(data){ response(data); });\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0});\n<\/script><\/code><\/pre>\n
In der search.php<\/code>Datei m\u00fcssen wir Datens\u00e4tze aus der Datenbank holen, die Ausgabe im Array-Format erstellen und schlie\u00dflich json_encode<\/code>das Array codieren. Vergessen Sie nicht zu verwenden, json_encode<\/code>sonst erhalten Sie nicht die erwartete Ausgabe.<\/p>\n
<?php\n$q = $_REQUEST['q']['term'];\n\u00a0\n\/\/search in the database and get the result.\n\/\/for e.x. your database result is ['sam', 'sandy']\n\/\/json_encode the final output\necho json_encode(['sam', 'sandy']);\n?><\/code><\/pre>\n
Ich hoffe, Sie verstehen, wie man jQuery Autocomplete mit Ajax in PHP verwendet. Wir w\u00fcrden gerne Ihre Meinung im Kommentarbereich unten h\u00f6ren.<\/p>\n
Zum Thema passende Artikel<\/h4>\n