Ciao ragazzi, ho un problema abbastanza strano con l'autocomplete: dopo aver pescato i dati dal database tramite ajax e visualizzato la lista, appena vado a interagire con essa (mouse o tastiera), chiude il widget. Ho provato a fare tipo preventDefault() su focus e close, però non cambia il risultato
in aiuto vi posto il codice: ho preso come riferimento l'esempio da jquerui.com con appunto la chiamata ajax
codice:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<link rel="stylesheet" href="../css/jquery-ui-1.10.0.custom.css" />
<link rel="stylesheet" href="../css/jquery-ui-1.10.0.custom.min.css" />
<script src="../libs/jquery-1.9.0.js"></script>
<script src="../libs/jquery-ui-1.10.0.custom.js"></script>
<script src="../libs/jquery-ui-1.10.0.custom.min.js"></script>
<script>
var user=540;
var selectedPlace=-1;
$(document).ready(function() {
$("#postAdvice").hide();
$('input[name="postRadio"]').change(function(e) {
e.preventDefault();
if($(this).val()==1) {
$("#postState").slideUp(500,function() {
$("#postAdvice").slideDown(500);
});
} else {
$("#postAdvice").slideUp(500,function() {
$("#postState").slideDown(500);
});
}
});
$("#advicePlace").autocomplete({
source: function(request,response) {
$.ajax({
type:"POST",
url:"../scripts/placenameautocomplete.php",
dataType:"json",
data:{
text:request.term,
user:user
},
success: function(result) {
response(
$.map(result.places,function(item) {
return {
label:item.PlaceName,
value:item.PlaceCode
};
}));
}
});
},
minLength:2,
select:function(event,ui) {
event.preventDefault();
selectedPlace=ui.item.value;
},
});
});
</script>
<style>
#newPost{
width:450px;
border:2px solid #1c1f26;
}
#npContent{
margin:5px 10px;
}
#postTypeSwitcher{
width:100%;
text-align:center;
}
.postTypeRadio{
margin:0 10px;
}
.ptTitle{
margin:3px 0;
}
.ptContent{
margin:3px 0;
}
.postText{
width:420px;
resize:none;
height:30px;
font-size:14px;
}
#postPublish{
margin-top:10px;
text-align:center;
}
.ui-autocomplete-loading{
background:white right no-repeat url(../img/miniload.gif);
}
</style>
</head>
<body>
<div id="newPost">
<div id="npContent">
<div id="postTypeSwitcher">
Stato<input type="radio" class="postTypeRadio" name="postRadio" value="0" checked="checked" /> Consiglio <input type="radio" name="postRadio" class="postTypeRadio" value="1" /></div>
<div id="postTypeContainer">
<div class="postType" id="postState">
<div class="ptTitle">A cosa stai pensando?</div>
<div class="ptContent"><textarea id="stateText" class="postText"></textarea></div>
</div>
<div class="postType" id="postAdvice">
<div class="ptTitle">Scrivi la tua sponsorizzazione</div>
<div class="ptContent"><textarea id="adviceText" class="postText"></textarea></div>
<div class="ptTitle">A chi è rivolta la tua sponsorizzazione?</div>
<div class="ptContent"><input id="advicePlace" class="postText" /></div>
</div>
</div>
<div id="postPublish"><button id="confirmPost">Pubblica</button></div>
</div>
</div>
</body>
</html>
le librerie jquery sono da "locale" visto che sto utilizzando anche un tema custom creato con themeroller
grazie in anticipo