Autocomplete, vil indsætte link på søgeresultat
Hej Eksperter,Bokser med en autocomplete.
Eller, jeg bokser med at få et link på resultat, så jeg viderestiller til side.
index:
<html>
<head>
<TITLE>Autocomplete</TITLE>
<head>
<style>
body{width:610px;}
.frmSearch {border: 1px solid #a8d4b1;background-color: #c6f7d0;margin: 2px 0px;padding:40px;border-radius:4px;}
#player-list{float:left;list-style:none;margin-top:-3px;padding:0;width:190px;position: absolute;}
#player-list li{padding: 10px; background: #f0f0f0; border-bottom: #bbb9b9 1px solid;}
#player-list li:hover{background:#ece3d2;cursor: pointer;}
#search-box{padding: 10px;border: #a8d4b1 1px solid;border-radius:4px;}
</style>
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#search-box").keyup(function(){
$.ajax({
type: "post",
url: "readPlayer.php",
data:'keyword='+$(this).val(),
beforeSend: function(){
$("#search-box").css("background","#FFF url(/images/LoaderIcon.gif) no-repeat 165px");
},
success: function(data){
$("#suggesstion-box").show();
$("#suggesstion-box").html(data);
$("#search-box").css("background","#FFF");
}
});
});
});
function selectPlayer(val) {
$("#search-box").val(val);
$("#suggesstion-box").hide();
}
});
</script>
</head>
<body>
<div class="frmSearch">
<input type="text" id="search-box" placeholder="Spiller" />
<div id="suggesstion-box"></div>
</form>
</div>
</body>
</html>
readPlayer.php:
<?php
require_once("dbcontroller.php");
$db_handle = new DBController();
if(!empty($_POST["keyword"])) {
$query ="SELECT * FROM player WHERE navn like '" . $_POST["keyword"] . "%' ORDER BY navn LIMIT 0,6";
$result = $db_handle->runQuery($query);
if(!empty($result)) {
?>
<ul id="player-list">
<?php
foreach($result as $player) {
?>
<li onClick="selectPlayer('<?php echo $player["navn"]; ?>');"><?php echo $player["navn"]; ?></li>
<?php } ?>
</ul>
<?php } } ?>
og ja, så er dbcontroller bare den der connecter til db.
