So verwenden Sie jQuery Autocomplete mit Ajax With
Möchten 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 übereinstimmt, vorab ausgefüllt wird.
jQuery UI bietet Autocomplete-Funktion. Um diese Funktion zu verwenden, müssen Sie die von ihnen bereitgestellten JS- und CSS-Dateien verwenden.
In diesem kurzen Tutorial nehmen wir ein kleines Beispiel und zeigen Ihnen, wie Sie jQuery Autocomplete mit Ajax verwenden.
Nehmen wir als Beispiel ein Textfeld. Wenn ein Benutzer beginnt, einen Buchstaben in dieses Feld einzugeben, sollten vorab ausgefüllte Daten angezeigt werden, aus denen der Benutzer einen bestimmten auswählen kann.
So verwenden Sie jQuery Autocomplete mit Ajax
Nehmen wir an, unser Textfeld ist für den Vornamen eines Benutzers. Sie müssen nach dem Vornamen suchen und Namensaufzeichnungen werden in der Datenbank gespeichert.
Erstellen Sie eine index.htmlDatei und fügen Sie den folgenden Code darin ein.
<html>
<head>
<title>jQuery Autocomplete</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<div class="form-group">
<label for="exampleInputFname">First Name</label>
<input type="text" class="form-control" id="fnames" placeholder="First Name" name="fname">
</div>
</div>
<div class="col-md-2"></div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>Im obigen HTML habe ich dem Suchfeld die ID "fnames" gegeben. Auf dieser ID würde ich die Autocomplete-Methode aufrufen.
Als Nächstes schreiben wir JavaScript-Code, der die Autocomplete-Methode verwendet, ruft die Ajax-Datei auf, holt die Antwort aus der Ajax-Datei und hängt sie an das Suchfeld an.
<script type="text/javascript">
$(function() {
$("#fnames").autocomplete({
source: function(term, response){
$.getJSON('search.php', { q: term }, function(data){ response(data); });
}
});
});
</script>In der search.phpDatei müssen wir Datensätze aus der Datenbank holen, die Ausgabe im Array-Format erstellen und schließlich json_encodedas Array codieren. Vergessen Sie nicht zu verwenden, json_encodesonst erhalten Sie nicht die erwartete Ausgabe.
<?php
$q = $_REQUEST['q']['term'];
//search in the database and get the result.
//for e.x. your database result is ['sam', 'sandy']
//json_encode the final output
echo json_encode(['sam', 'sandy']);
?>Ich hoffe, Sie verstehen, wie man jQuery Autocomplete mit Ajax in PHP verwendet. Wir würden gerne Ihre Meinung im Kommentarbereich unten hören.