Kuinka käyttää jQuery-automaattista täydennystä Ajaxin kanssa
Haluatko integroida jQuery Autocomplete -sivustosi? jQuery-automaattinen täydennys on kuin Google-haku, jossa käyttäjä syöttää joitain kirjaimia ja kirjoitettuihin kirjaimiin vastaava tulosjoukko täytetään ennalta.
jQuery-käyttöliittymä tarjoaa automaattisen täydennyksen. Tämän ominaisuuden käyttämiseksi sinun on käytettävä niiden toimittamia JS- ja CSS-tiedostoja.
Tässä lyhyessä opetusohjelmassa otamme pienen esimerkin ja näytämme sinulle, miten jQuery Autocomplete -ohjelmaa käytetään Ajaxin kanssa.
Otetaan esimerkkinä yksi tekstikenttä. Kun käyttäjä alkaa kirjoittaa kirjainta tähän kenttään, pitäisi ilmestyä valmiiksi täytetyt tiedot, joista käyttäjä voi valita tietyn.
Kuinka käyttää jQuery-automaattista täydennystä Ajaxin kanssa
Oletetaan, että tekstikenttämme on käyttäjän etunimi. Etunimeä on etsittävä, ja tietueet nimistä tallennetaan tietokantaan.
Luo index.htmltiedosto ja lisää siihen alla oleva koodi.
<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>Yllä olevassa HTML: ssä olen antanut hakukentälle id "fnames". Tällä tunnuksella kutsuisin automaattisen täydennyksen menetelmää.
Seuraavaksi kirjoitetaan JavaScript-koodi, joka käyttää automaattista täydennysmenetelmää, soita ajax-tiedostolle, napauta vastaus ajax-tiedostosta ja liitä hakukenttään.
<script type="text/javascript">
$(function() {
$("#fnames").autocomplete({
source: function(term, response){
$.getJSON('search.php', { q: term }, function(data){ response(data); });
}
});
});
</script>Vuonna search.phptiedosto, meidän täytyy noutaa tietueita tietokannasta, rakentaa lähtö array-muodossa ja lopulta käyttää json_encodekoodaamaan jono. Älä unohda käyttää, json_encodemuuten et saa odotettua tulosta.
<?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']);
?>Toivon, että ymmärrät kuinka käyttää jQuery Autocompleteä Ajaxin kanssa PHP: ssä. Haluamme kuulla ajatuksesi alla olevassa kommenttiosassa.