jQuery UI Autocomplete – Hent data med MySQLi
I denne tutorial vil jeg vise, hvordan man hurtigt og nemt kan lave et autocomplete system med jQuery UI og MySQLi, som henter data fra en database.
Jeg har i denne tutorial valgt at bruge jQuery UIs CSS fil, men man kan vælge at style autocompelte systemet som man selv vil, det er dog ikke så nemt hvis man benytter flere jQuery UI objekter på en side, men det kan lade sig gøre.
Systemet virker desværre ikke i localhost, men på en rigtig webserver virker det.
Database struktur:
index.php | HTML kode:
<form action="" method="post">
<label for="autocomplete">Navn:</label>
<input type="text" id="autocomplete" />
<input type="submit" value="Søg" />
</form>
main.js | JavaScript kode:
$(document).ready(function() {
$('#autocomplete').autocomplete({
source: 'search.php',
minLenght: 1,
delay: 500
});
});
search.php | PHP kode:
<?php
require 'config.php';
if(isset($_GET['term'])) {
$data = '%'. $_GET['term'] . '%';
$query = mysqli_query($mysqli, "SELECT `navn` FROM `jquery-ui-autocomplete` WHERE `navn` LIKE '$data'"); //Opdater query til at hente egne informationer
while($row = mysqli_fetch_array($query)) {
$returnerede_data[] = array('label' => $row['navn']); //Opdater array til at vise egne informationer
}
echo json_encode($returnerede_data);
}
?>
Hele index.php og config.php
index.php
<!DOCTYPE html>
<html lang="da">
<head>
<meta charset="utf-8" />
<title>jQuery UI Autocomplete - Hent data med MySQLi</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="main.js"></script>
</head>
<body>
<form action="" method="post">
<label for="autocomplete">Navn:</label>
<input type="text" id="autocomplete" />
<input type="submit" value="Søg" />
</form>
</body>
</html>
config.php
<?php $host = ''; //Indsæt egen vært/host $brugernavn = ''; //Indsæt eget brugernavn $kodeord = ''; //Indsæt eget kodeord $database = ''; //Indsæt egen database $mysqli = mysqli_connect($host, $brugernavn, $kodeord, $database); mysqli_set_charset($mysqli, 'utf8'); ?>
Eksempel: jQuery UI Autocomplete
Download: jQuery UI Autocomplete
Hvordan fanger man så et billede fra databasen, skal bruge det sådan nu her så det ville være cool hvis i kunne hjælpe
Er ikke helt sikker på hvad du mener, men tænker du på at man vælger noget fra dropdown listen, og så henter den samtidig en URL til et billede, som du så kan vise et sted på din side?