Dinamik Tavsiye Listesi Uyglaması
HTML5 + jQuery + PHP + MySQL kullanarak HTML5'in datalist tagı ile yapılmış güzel bir hızlı arama uygulaması
HTML Kodları
<!DOCTYPE HTML>
<html>
<head>
<title>Dynamic Auto-Suggestion using datalist element: HTML5</title>
<meta charset="utf-8"/>
<script src="jQuery.js"></script>
<script src="myScript.js"></script>
</head>
<body>
<form>
<input type="text" list="myCompanies" name="company" id="suggest" />
<datalist id="myCompanies">
</datalist>
</form>
</body>
</html>
<html>
<head>
<title>Dynamic Auto-Suggestion using datalist element: HTML5</title>
<meta charset="utf-8"/>
<script src="jQuery.js"></script>
<script src="myScript.js"></script>
</head>
<body>
<form>
<input type="text" list="myCompanies" name="company" id="suggest" />
<datalist id="myCompanies">
</datalist>
</form>
</body>
</html>
Php Kodları
< ?php
$db = mysqli_connect('localhost', 'root', '', 'search');
$company = $_GET['company'];
$sql = "SELECT name FROM table1 WHERE name like '$company%' ORDER BY name";
$res = $db->query($sql);
if(!$res)
echo mysqli_error($db);
else
while( $row = $res->fetch_object() )
echo "<option value='".$row->name."'>";
?>
$db = mysqli_connect('localhost', 'root', '', 'search');
$company = $_GET['company'];
$sql = "SELECT name FROM table1 WHERE name like '$company%' ORDER BY name";
$res = $db->query($sql);
if(!$res)
echo mysqli_error($db);
else
while( $row = $res->fetch_object() )
echo "<option value='".$row->name."'>";
?>
Jquery Kodları
$(document).ready(function(){
$("#suggest").keyup(function(){
$.get("suggest.php", {company: $(this).val()}, function(data){
$("datalist").empty();
$("datalist").html(data);
});
});
});
$("#suggest").keyup(function(){
$.get("suggest.php", {company: $(this).val()}, function(data){
$("datalist").empty();
$("datalist").html(data);
});
});
});
Yorumunuzu Ekleyin
