The following jquery code works just fine on the latest version of Chrome,
On focus event of the input field it should trigger the autocompletion of the field itself using ajax to retrieve the suggestions but it does not work at all on IE10
The console is empty...
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script>
$(function() {
function log( message ) {
$( "<div>" ).text( message ).prependTo( "#log" );
$( "#log" ).scrollTop( 0 );
}
$( "#myBut").click(function(){
if($('#city').val() == "")
return;
log("selected: " + $("#city").val() );
$('#city').val("");
$('#city').blur("");
});
$( "#city" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "http://localhost:8085/TestJsonArrayAJAX/MyServlet",
dataType: "json",
data: {
q: request.term
},
success: function( data ) {
alert("ciao");
response( data );
}
});
},
minLength: 0,
select: function( event, ui )
{
alert('ccc');
},
open: function() {
$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
},
close: function() {
$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
}}).focus(function() { alert("c");
//Use the below line instead of triggering keydown
$(this).data("uiAutocomplete").search($(this).val()) });
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="city">Your city: </label>
<input id="city">
Powered by <a href="http://geonames.org">geonames.org</a>
</div>
<button name="subject" id="myBut" value="HTML">HTML</button>
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
Result:
<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>
</body>
</html>
