Comment utiliser la saisie semi-automatique jQuery avec Ajax
Vous cherchez à intégrer jQuery Autocomplete sur votre site Web? jQuery Autocomplete est comme la recherche Google où un utilisateur entre des lettres et l’ensemble de résultats correspondant aux lettres tapées sont pré-remplis.
jQuery UI fournit une fonctionnalité de saisie semi-automatique. Pour utiliser cette fonctionnalité, vous devez utiliser les fichiers JS et CSS fournis par eux.
Dans ce court tutoriel, nous allons prendre un petit exemple et vous montrer comment utiliser jQuery Autocomplete avec Ajax.
A titre d’exemple, prenons un champ de texte. Lorsqu’un utilisateur commence à saisir une lettre dans ce champ, des données pré-remplies doivent apparaître à partir desquelles l’utilisateur peut en sélectionner une spécifique.
Comment utiliser la saisie semi-automatique jQuery avec Ajax
Disons que notre champ de texte est pour le prénom d’un utilisateur. Vous devez rechercher le prénom et les enregistrements des noms sont stockés dans la base de données.
Créez un index.htmlfichier et ajoutez-y le code ci-dessous.
<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>Dans le code HTML ci-dessus, j’ai donné l’identifiant "fnames" au champ de recherche. Sur cet identifiant, j’appellerais la méthode de saisie semi-automatique.
Ensuite, écrivons du code JavaScript qui utilise la méthode de saisie semi-automatique, appelons le fichier ajax, récupérons la réponse du fichier ajax et ajoutons à la zone de recherche.
<script type="text/javascript">
$(function() {
$("#fnames").autocomplete({
source: function(term, response){
$.getJSON('search.php', { q: term }, function(data){ response(data); });
}
});
});
</script>Dans le search.phpfichier, nous devons récupérer les enregistrements de la base de données, générer la sortie au format tableau et enfin utiliser json_encodepour encoder le tableau. N’oubliez pas d’utiliser json_encodeou bien vous n’obtiendrez pas le résultat attendu.
<?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']);
?>J’espère que vous comprenez comment utiliser jQuery Autocomplete avec Ajax en PHP. Nous aimerions entendre vos pensées dans la section des commentaires ci-dessous.
Articles Liés
- Téléchargement de fichiers Ajax avec PHP et jQuery
- Cochez/Désélectionnez plusieurs cases à l’aide de jQuery