{"id":24565,"date":"2021-05-17T10:28:00","date_gmt":"2021-05-17T07:28:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24565"},"modified":"2021-10-18T03:12:55","modified_gmt":"2021-10-18T00:12:55","slug":"come-utilizzare-il-completamento-automatico-di-jquery-con-ajax","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/it\/come-utilizzare-il-completamento-automatico-di-jquery-con-ajax\/","title":{"rendered":"Come utilizzare il completamento automatico di jQuery con Ajax"},"content":{"rendered":"

Stai cercando di integrare jQuery Autocomplete sul tuo sito web? jQuery Autocomplete \u00e8 come Ricerca Google in cui un utente inserisce alcune lettere e il set di risultati corrispondente alle lettere digitate \u00e8 precompilato.<\/p>\n

jQuery UI<\/a> fornisce la funzione di completamento automatico. Per utilizzare questa funzionalit\u00e0 \u00e8 necessario utilizzare i file JS e CSS forniti da loro.<\/p>\n

In questo breve tutorial, faremo un piccolo esempio e ti mostreremo come utilizzare jQuery Autocomplete con Ajax.<\/p>\n

Ad esempio, prendiamo un campo di testo. Quando un utente inizia a inserire una lettera in questo campo, dovrebbero apparire dati precompilati da cui l’utente pu\u00f2 selezionarne uno specifico.<\/p>\n

Come utilizzare il completamento automatico di jQuery con Ajax<\/h3>\n

Diciamo che il nostro campo di testo \u00e8 per il nome di un utente. Devi cercare il nome e le registrazioni dei nomi sono memorizzate nel database.<\/p>\n

Crea un index.html<\/code>file e aggiungi il codice qui sotto.<\/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
Nell’HTML sopra, ho dato l’id "fnames" alla casella di ricerca. Su questo ID chiamerei il metodo di completamento automatico.<\/p>\n
Successivamente, scriviamo il codice JavaScript che utilizza il metodo di completamento automatico, diamo una chiamata al file ajax, prendiamo la risposta dal file ajax e aggiungiamo alla casella di ricerca.<\/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
Nel search.php<\/code>file, dobbiamo recuperare i record dal database, creare l’output in formato array e infine usarlo json_encode<\/code>per codificare l’array. Non dimenticare di usare json_encode<\/code>altrimenti non otterrai l’output previsto.<\/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
Spero che tu capisca come usare jQuery Autocomplete con Ajax in PHP. Ci piacerebbe sentire i tuoi pensieri nella sezione commenti qui sotto.<\/p>\n
articoli Correlati<\/h4>\n