Come utilizzare il completamento automatico di jQuery con Ajax
Stai cercando di integrare jQuery Autocomplete sul tuo sito web? jQuery Autocomplete è come Ricerca Google in cui un utente inserisce alcune lettere e il set di risultati corrispondente alle lettere digitate è precompilato.
jQuery UI fornisce la funzione di completamento automatico. Per utilizzare questa funzionalità è necessario utilizzare i file JS e CSS forniti da loro.
In questo breve tutorial, faremo un piccolo esempio e ti mostreremo come utilizzare jQuery Autocomplete con Ajax.
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ò selezionarne uno specifico.
Come utilizzare il completamento automatico di jQuery con Ajax
Diciamo che il nostro campo di testo è per il nome di un utente. Devi cercare il nome e le registrazioni dei nomi sono memorizzate nel database.
Crea un index.htmlfile e aggiungi il codice qui sotto.
<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>Nell’HTML sopra, ho dato l’id "fnames" alla casella di ricerca. Su questo ID chiamerei il metodo di completamento automatico.
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.
<script type="text/javascript">
$(function() {
$("#fnames").autocomplete({
source: function(term, response){
$.getJSON('search.php', { q: term }, function(data){ response(data); });
}
});
});
</script>Nel search.phpfile, dobbiamo recuperare i record dal database, creare l’output in formato array e infine usarlo json_encodeper codificare l’array. Non dimenticare di usare json_encodealtrimenti non otterrai l’output previsto.
<?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']);
?>Spero che tu capisca come usare jQuery Autocomplete con Ajax in PHP. Ci piacerebbe sentire i tuoi pensieri nella sezione commenti qui sotto.
articoli Correlati
- Caricamento di file Ajax con PHP e jQuery
- Casella di controllo multipla Seleziona/deseleziona usando jQuery