<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
- function log(message) {
- $("<div/>").text(message).prependTo("#log");
- $("#log").attr("scrollTop", 0);
- }
-
var cache = {};
- $("#birds").autocomplete({
+ $( "#birds" ).autocomplete({
+ minLength: 2,
source: function(request, response) {
- if (cache.term == request.term && cache.content) {
- response(cache.content);
- return;
- }
- if (new RegExp(cache.term).test(request.term) && cache.content && cache.content.length < 13) {
- response($.ui.autocomplete.filter(cache.content, request.term));
+ if ( request.term in cache ) {
+ response( cache[ request.term ] );
return;
}
+
$.ajax({
url: "search.php",
dataType: "json",
data: request,
- success: function(data) {
- cache.term = request.term;
- cache.content = data;
- response(data);
+ success: function( data ) {
+ cache[ request.term ] = data;
+ response( data );
}
});
- },
- minLength: 2,
- select: function(event, ui) {
- log(ui.item ? ("Selected: " + ui.item.value + " aka " + ui.item.id) : "Nothing selected, input was " + this.value);
}
});
});
<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>
-
</div><!-- End demo -->
<div class="demo-description">