You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
47 lines
1.4 KiB
47 lines
1.4 KiB
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>jQuery UI Autocomplete - Remote with caching</title>
|
|
<link rel="stylesheet" href="../../themes/base/all.css">
|
|
<link rel="stylesheet" href="../demos.css">
|
|
<style>
|
|
.ui-autocomplete-loading {
|
|
background: white url("images/ui-anim_basic_16x16.gif") right center no-repeat;
|
|
}
|
|
</style>
|
|
<script src="../../external/requirejs/require.js"></script>
|
|
<script src="../bootstrap.js">
|
|
var cache = {};
|
|
$( "#birds" ).autocomplete({
|
|
minLength: 2,
|
|
source: function( request, response ) {
|
|
var term = request.term;
|
|
if ( term in cache ) {
|
|
response( cache[ term ] );
|
|
return;
|
|
}
|
|
|
|
$.getJSON( "search.php", request, function( data, status, xhr ) {
|
|
cache[ term ] = data;
|
|
response( data );
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="ui-widget">
|
|
<label for="birds">Birds: </label>
|
|
<input id="birds">
|
|
</div>
|
|
|
|
<div class="demo-description">
|
|
<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are bird names, displayed when at least two characters are entered into the field.</p>
|
|
<p>Similar to the remote datasource demo, though this adds some local caching to improve performance. The cache here saves just one query, and could be extended to cache multiple values, one for each term.</p>
|
|
</div>
|
|
</body>
|
|
</html>
|