Response title
This is preview!
- Screen name: eric8165
eric8165's Profile
1 Posts
0 Responses
0
Followers
Activity Trend
Last 30 days
- Last 30 days
- Date Interval
From Date : To Date :
Loading Chart...
Show:
- Expanded view
- List view
Private Message
- 30-Dec-2012 05:30 PM
- Forum: Using jQuery UI
I am trying to upgrade from 1.8 to 1.9 and could not make the autocomplete to function with remote datasource. So I tried to use the demo version and host it on my server, and it fails too.
I suspect the problem is with / characters in the source property.
Searching for "pig" hoping to find "pigeon", it works it I use the following URL
http://jqueryui.com/resources/demos/autocomplete/search.php?term=pig
Could anyone try the following example and search for "pi" or "pig".
Thanks, Eric
---------------------------------------------------------------------------------------------------------------------------------
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Autocomplete - Remote datasource</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" />
<style>
.ui-autocomplete-loading {
background: white url('http://jqueryui.com/resources/demos/autocomplete/images/ui-anim_basic_16x16.gif') right center no-repeat;
}
</style>
<script>
$(function() {
function log( message ) {
$( "<div>" ).text( message ).prependTo( "#log" );
$( "#log" ).scrollTop( 0 );
}
$( "#birds" ).autocomplete({
source: "http://jqueryui.com/resources/demos/autocomplete/search.php",
minLength: 2,
select: function( event, ui ) {
log( ui.item ?
"Selected: " + ui.item.value + " aka " + ui.item.id :
"Nothing selected, input was " + this.value );
}
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="birds">Birds: </label>
<input id="birds" />
</div>
<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>- «Prev
- Next »
Moderate user : eric8165
