Tramite jquery, php e mysql sto cercando di creare l'autocomplete.
Recupero i suggerimenti/dati da mysql e li visualizzo.
Il problema � che non riesco ad inserire nel input text ci� che seleziono La funzione al click .select_stud
sembra si esegue.
codice HTML:
<!DOCTYPE html>
<html lang="it"><head>
<meta charset="utf-8" /> <title>Prova</title> <meta name="viewport" content="width=device-width">
<link href="http://localhost/Prova/assets/css/app.css" rel="stylesheet" type="text/css" />
<link href="http://localhost/Prova/assets/css/foundation-icons/foundation-icons.css" rel="stylesheet" type="text/css" />
<link href="http://localhost/Prova/assets/css/style.css" rel="stylesheet" type="text/css" />
<script src="http://localhost/Prova/assets/js/jquery.min.js" type="text/javascript"></script>
<script src="http://localhost/Prova/assets/js/foundation.min.js" type="text/javascript"></script>
</head>
<body><div id="container" class="small-12">
<header class="clearfix"><h1>HEADER</h1></header>
<div class="row"><div id="content" class="row">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<style>
.stud {border: 1px solid #a8d4b1;background-color: #c6f7d0;margin: 2px 0px;padding:40px;border-radius:4px;}
#utente-list{float:left;list-style:none;margin-top:-3px;padding:0;width:190px;position: absolute;}
#utente-list li{padding: 10px; background: #f0f0f0; border-bottom: #bbb9b9 1px solid;}
#utente-list li:hover{background:#ece3d2;cursor: pointer;}
#utente{padding: 10px;border: #a8d4b1 1px solid;border-radius:4px;}
</style><script src="http://localhost/Prova/assets/js/autocomplete.js"></script>
<div class="small-6 column"><form action="/nome/cerca" enctype="multipart/form-data" method="post" accept-charset="utf-8">
<div class="stud"><span class="small-4 column"><label for="Name">Cognome e nome</label></span><span class="small-8 column"><input type="text" name="Name" value="" size="50" id="utenti" class="small-12" autocomplete="off" />
</span></div><input type="submit" name="cerca_stud" value="Cerca" class="button" />
</form></div></div>
<footer id="footer" class="text-center">� FOOTER </footer>
<script src="http://localhost/Prova/assets/js/app.js" type="text/javascript"></script>
<script src="http://localhost/Prova/assets/js/foundation.util.motion.js" type="text/javascript"></script>
</div> <!---container-->
</body>
</html>
autocomplete.js
Codice PHP:
$(document).ready(function(){
$("#utenti").keyup(function(){
$.ajax({
type: "POST",
url: "http://localhost/Prova//Studenti/search_stud",
data:'keyword='+$(this).val(),
beforeSend: function(){ $("#studenti").css("background","#FFF"); },
success: function(data){
$("#suggesstion-box").show(); $("#suggesstion-box").html(data);
$("#studenti").css("background","#FF0000");}
}
}); });
}); $(document).ready(function(){
$(".select_stud").click(function() {
alert("22");
$("#studenti").val($(this).val());
$("#suggesstion-box").hide();
});
});
