Jak korzystać z autouzupełniania jQuery z Ajax
Chcesz zintegrować autouzupełnianie jQuery ze swoją stroną internetową? Autouzupełnianie jQuery przypomina wyszukiwarkę Google, w której użytkownik wpisuje kilka liter, a dopasowanie wyników z wpisanymi literami jest wstępnie wypełniane.
jQuery UI zapewnia funkcję autouzupełniania. Aby skorzystać z tej funkcji, musisz użyć dostarczonych przez nich plików JS i CSS.
W tym krótkim samouczku weźmiemy mały przykład i pokażemy, jak używać autouzupełniania jQuery z Ajaxem.
Jako przykład weźmy jedno pole tekstowe. Gdy użytkownik zacznie wpisywać literę w tym polu, powinny pojawić się wstępnie wypełnione dane, z których użytkownik może wybrać konkretną.
Jak korzystać z autouzupełniania jQuery z Ajax
Załóżmy, że nasze pole tekstowe jest przeznaczone na imię użytkownika. Musisz wyszukać imię, a rekordy nazwisk są przechowywane w bazie danych.
Utwórz index.htmlplik i dodaj do niego poniższy kod.
<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>W powyższym kodzie HTML podałem id „fnames" do pola wyszukiwania. Na tym id wywołałbym metodę autouzupełniania.
Następnie napiszmy kod JavaScript, który używa metody autouzupełniania, wywołaj plik ajax, pobierz odpowiedź z pliku ajax i dołącz do pola wyszukiwania.
<script type="text/javascript">
$(function() {
$("#fnames").autocomplete({
source: function(term, response){
$.getJSON('search.php', { q: term }, function(data){ response(data); });
}
});
});
</script>W search.phppliku musimy pobrać rekordy z bazy danych, zbudować wynik w formacie tablicy i na koniec użyć json_encodedo zakodowania tablicy. Nie zapomnij użyć, w json_encodeprzeciwnym razie nie uzyskasz oczekiwanego wyniku.
<?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']);
?>Mam nadzieję, że rozumiesz, jak używać autouzupełniania jQuery z Ajaxem w PHP. Chcielibyśmy poznać Twoje przemyślenia w sekcji komentarzy poniżej.