Hur man använder jQuery Autofullständig med Ajax
Vill du integrera jQuery Autocomplete på din webbplats? jQuery Autocomplete är som Google-sökning där en användare skriver in bokstäver och resultatuppsättning som matchas med skrivna bokstäver fylls i i förväg.
jQuery UI tillhandahåller funktionen Autoslutförande. För att använda den här funktionen måste du använda JS- och CSS-filer som tillhandahålls av dem.
I den här korta handledningen tar vi ett litet exempel och visar dig hur du använder jQuery Autocomplete med Ajax.
Som ett exempel, låt oss ta ett textfält. När en användare börjar skriva in en bokstav i det här fältet ska förfyllda data visas som användaren kan välja en specifik.
Hur man använder jQuery Autocomplete med Ajax
Låt oss säga att vårt textfält är för en användares förnamn. Du måste söka efter förnamnet och register över namnen lagras i databasen.
Skapa en index.htmlfil och lägg till koden nedan i den.
<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>I ovanstående HTML har jag gett id "fnames" till sökrutan. På detta id skulle jag kalla metoden för autoslutförande.
Låt oss sedan skriva JavaScript-kod som använder autoslutföringsmetoden, ringa ajax-filen, ta svaret från ajax-filen och lägg till sökrutan.
<script type="text/javascript">
$(function() {
$("#fnames").autocomplete({
source: function(term, response){
$.getJSON('search.php', { q: term }, function(data){ response(data); });
}
});
});
</script>I search.phpfilen måste vi hämta poster från databasen, bygga utdata i matrisformat och slutligen använda för json_encodeatt koda matrisen. Glöm inte att använda json_encodeannars kommer du inte att få den förväntade effekten.
<?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']);
?>Jag hoppas att du förstår hur du använder jQuery Autocomplete med Ajax i PHP. Vi vill höra dina tankar i kommentarsektionen nedan.