Dinamik Tavsiye Listesi Uyglaması

HTML5 + jQuery + PHP + MySQL kullanarak HTML5'in datalist tagı ile yapılmış güzel bir hızlı arama uygulaması

Dinamik Tavsiye Listesi Uyglaması

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>

 

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."'>";
 
?>

 

Jquery Kodları

$(document).ready(function(){
        $("#suggest").keyup(function(){
                $.get("suggest.php", {company: $(this).val()}, function(data){
                        $("datalist").empty();
                        $("datalist").html(data);
                });
        });
});
 
 
 

 

Yorumunuzu Ekleyin


Yükleniyor...
Yükleniyor...