{"id":24398,"date":"2021-05-17T10:37:00","date_gmt":"2021-05-17T07:37:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24398"},"modified":"2021-10-18T02:15:59","modified_gmt":"2021-10-17T23:15:59","slug":"comment-utiliser-la-saisie-semi-automatique-jquery-avec-ajax","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/comment-utiliser-la-saisie-semi-automatique-jquery-avec-ajax\/","title":{"rendered":"Comment utiliser la saisie semi-automatique jQuery avec Ajax"},"content":{"rendered":"

Vous cherchez \u00e0 int\u00e9grer jQuery Autocomplete sur votre site Web? jQuery Autocomplete est comme la recherche Google o\u00f9 un utilisateur entre des lettres et l’ensemble de r\u00e9sultats correspondant aux lettres tap\u00e9es sont pr\u00e9-remplis.<\/p>\n

jQuery UI<\/a> fournit une fonctionnalit\u00e9 de saisie semi-automatique. Pour utiliser cette fonctionnalit\u00e9, vous devez utiliser les fichiers JS et CSS fournis par eux.<\/p>\n

Dans ce court tutoriel, nous allons prendre un petit exemple et vous montrer comment utiliser jQuery Autocomplete avec Ajax.<\/p>\n

A titre d’exemple, prenons un champ de texte. Lorsqu’un utilisateur commence \u00e0 saisir une lettre dans ce champ, des donn\u00e9es pr\u00e9-remplies doivent appara\u00eetre \u00e0 partir desquelles l’utilisateur peut en s\u00e9lectionner une sp\u00e9cifique.<\/p>\n

Comment utiliser la saisie semi-automatique jQuery avec Ajax<\/h3>\n

Disons que notre champ de texte est pour le pr\u00e9nom d’un utilisateur. Vous devez rechercher le pr\u00e9nom et les enregistrements des noms sont stock\u00e9s dans la base de donn\u00e9es.<\/p>\n

Cr\u00e9ez un index.html<\/code>fichier et ajoutez-y le code ci-dessous.<\/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
Dans le code HTML ci-dessus, j’ai donn\u00e9 l’identifiant "fnames" au champ de recherche. Sur cet identifiant, j’appellerais la m\u00e9thode de saisie semi-automatique.<\/p>\n
Ensuite, \u00e9crivons du code JavaScript qui utilise la m\u00e9thode de saisie semi-automatique, appelons le fichier ajax, r\u00e9cup\u00e9rons la r\u00e9ponse du fichier ajax et ajoutons \u00e0 la zone de recherche.<\/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
Dans le search.php<\/code>fichier, nous devons r\u00e9cup\u00e9rer les enregistrements de la base de donn\u00e9es, g\u00e9n\u00e9rer la sortie au format tableau et enfin utiliser json_encode<\/code>pour encoder le tableau. N’oubliez pas d’utiliser json_encode<\/code>ou bien vous n’obtiendrez pas le r\u00e9sultat attendu.<\/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
J’esp\u00e8re que vous comprenez comment utiliser jQuery Autocomplete avec Ajax en PHP. Nous aimerions entendre vos pens\u00e9es dans la section des commentaires ci-dessous.<\/p>\n
Articles Li\u00e9s<\/h4>\n