JQuery automaatse täitmise kasutamine Ajaxiga
Kas soovite oma veebisaidile integreerida jQuery Autocomplete? jQuery automaatne täitmine on nagu Google’i otsing, kus kasutaja sisestab mõned tähed ja sisestatud tähtedega vastavusse seatud tulemuste komplekt on eelnevalt täidetud.
jQuery kasutajaliides pakub automaatse täitmise funktsiooni. Selle funktsiooni kasutamiseks peate kasutama nende pakutavaid JS- ja CSS-faile.
Selles lühikeses õpetuses võtame väikese näite ja näitame, kuidas kasutada jQuery Autocomplete’i Ajaxiga.
Võtame näiteks ühe tekstivälja. Kui kasutaja hakkab sellele väljale tähte sisestama, peaksid ilmuma eelnevalt täidetud andmed, millest kasutaja saab valida konkreetse.
JQuery automaatse täitmise kasutamine Ajaxiga
Oletame, et meie tekstiväli on kasutaja eesnimi. Peate otsima eesnime ja nimede kirjed salvestatakse andmebaasi.
Looge index.htmlfail ja lisage sellesse allolev kood.
<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>Ülalolevas HTML-is olen andnud otsingukastile id "fnames". Sellel id-il nimetaksin automaatse täitmise meetodit.
Seejärel kirjutame JavaScripti koodi, mis kasutab automaatse täitmise meetodit, helistame ajax-failile, haarame vastuse ajax-failist ja lisame otsingukasti.
<script type="text/javascript">
$(function() {
$("#fnames").autocomplete({
source: function(term, response){
$.getJSON('search.php', { q: term }, function(data){ response(data); });
}
});
});
</script>Kui search.phpfaili, peame tooma kirjed andmebaasi, ehitada väljund massiivi formaat ja lõpuks kasutada json_encodekodeerida massiivi. Ärge unustage seda kasutada, json_encodemuidu ei saa te oodatud väljundit.
<?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']);
?>Loodan, et saate aru, kuidas kasutada jQuery Autocomplete’i koos Ajaxiga PHP-s. Tahaksime teie mõtteid kuulda allpool olevas kommentaaride jaotises.