r3470 committed - autocomplete: ...
Revision: 3470
Author: joern.zaefferer
Date: Wed Nov 18 10:42:53 2009
Log: autocomplete:
removed cache-option from widget, moved reference implementation to
tests/visual/autocomplete/remote-with-cache.html, will use that for further
experiments on better cache implementations;
also extracted $.ui.autocomplete.escapeRegex to remove a few duplicates,
may later land in ui.core;
small cleanups on visual tests, correctly referencing visual.css instead of
static.css
http://code.google.com/p/jquery-ui/source/detail?r=3470
Added:
/branches/dev/tests/visual/autocomplete/remote-with-cache.html
Modified:
/branches/dev/tests/unit/autocomplete/autocomplete_defaults.js
/branches/dev/tests/unit/autocomplete/autocomplete_options.js
/branches/dev/tests/visual/autocomplete/combobox.html
/branches/dev/tests/visual/autocomplete/default.html
/branches/dev/tests/visual/autocomplete/remote-jsonp.html
/branches/dev/tests/visual/autocomplete/remote.html
/branches/dev/ui/jquery.ui.autocomplete.js
=======================================
--- /dev/null
+++ /branches/dev/tests/visual/autocomplete/remote-with-cache.html Wed Nov
18 10:42:53 2009
@@ -0,0 +1,87 @@
+<!doctype html>
+<html>
+<head>
+ <title>Autocomplete Visual Test: Remote JSON</title>
+ <link rel="stylesheet" href="../visual.css" type="text/css" />
+ <link rel="stylesheet" href="../../../themes/base/ui.base.css"
type="text/css" />
+ <link rel="stylesheet" href="../../../themes/base/ui.theme.css"
type="text/css" title="ui-theme" />
+ <script type="text/javascript" src="../../../jquery-1.3.2.js"></script>
+ <script type="text/javascript"
src="../../../ui/jquery.ui.core.js"></script>
+ <script type="text/javascript"
src="../../../ui/jquery.ui.position.js"></script>
+ <script type="text/javascript"
src="../../../ui/jquery.ui.menu.js"></script>
+ <script type="text/javascript"
src="../../../ui/jquery.ui.autocomplete.js"></script>
+ <script type="text/javascript"
src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
+ <script type="text/javascript">
+ $(function() {
+ $.fn.themeswitcher && $('<div/>').css({
+ position: "absolute",
+ right: 10,
+ top: 10
+ }).appendTo(document.body).themeswitcher();
+
+ function log(message) {
+ $("<div/>").text(message).prependTo("#log");
+ $("#log").attr("scrollTop", 0);
+ }
+
+ var cache = {
+ limit: 13
+ };
+
+ $("#birds").autocomplete({
+ source: function(request, response) {
+ if (cache.term == request.term && cache.content) {
+ return cache.content;
+ }
+ if (new RegExp(cache.term).test(request.term) && cache.content &&
cache.content.length < cache.limit) {
+ // TODO refactor with array-source above
+ var matcher = new
RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
+ return $.grep(cache.content, function(value) {
+ return matcher.test(value.result)
+ });
+ }
+ $.ajax({
+ url: "search.php",
+ dataType: "json",
+ data: request,
+ success: function(data) {
+ cache.term = request.term;
+ cache.content = data;
+ response(data);
+ }
+ });
+ },
+ minLength: 2,
+ search: function() {
+ log("Searching for: " + this.value);
+ },
+ open: function() {
+ log("Found something");
+ },
+ focus: function(event, ui) {
+ log("Moving focus to " + ui.item.label);
+ },
+ close: function() {
+ log("Hiding suggestions");
+ },
+ change: function(event, ui) {
+ log(ui.item ? ("Selected: " + ui.item.result + " aka " +
ui.item.id) : "Nothing selected, input was " + this.value);
+ }
+ });
+ });
+ </script>
+</head>
+<body>
+
+<div class="ui-widget">
+ <label for="birds">Birdy Birds: </label>
+ <input class="ui-widget ui-widget-content ui-corner-all" id="birds" />
+</div>
+
+<div class="ui-widget" style="margin-top:2em; font-family:Arial">
+ Log:
+ <div id="log" style="height: 400px; width: 300px; overflow: auto;"
class="ui-widget-content"></div>
+</div>
+
+</body>
+</html>
=======================================
--- /branches/dev/tests/unit/autocomplete/autocomplete_defaults.js Mon Nov
9 07:37:57 2009
+++ /branches/dev/tests/unit/autocomplete/autocomplete_defaults.js Wed Nov
18 10:42:53 2009
@@ -3,9 +3,6 @@
*/
var autocomplete_defaults = {
- cache: {
- limit: 50
- },
delay: 300,
disabled: false,
minLength: 1,
=======================================
--- /branches/dev/tests/unit/autocomplete/autocomplete_options.js Mon Nov
9 07:37:57 2009
+++ /branches/dev/tests/unit/autocomplete/autocomplete_options.js Wed Nov
18 10:42:53 2009
@@ -5,6 +5,8 @@
module("autocomplete: options");
+
+/* disabled until autocomplete actually has built-in support for caching
// returns at most 4 items
function source(request) {
ok(true, "handling a request");
@@ -58,6 +60,7 @@
source: source
}));
});
+*/
test("delay", function() {
});
=======================================
--- /branches/dev/tests/visual/autocomplete/combobox.html Mon Nov 9
07:37:57 2009
+++ /branches/dev/tests/visual/autocomplete/combobox.html Wed Nov 18
10:42:53 2009
@@ -2,7 +2,7 @@
<html>
<head>
<title>Autocomplete Visual Test: Combobox</title>
- <link rel="stylesheet" href="../static.css" type="text/css" />
+ <link rel="stylesheet" href="../visual.css" type="text/css" />
<link rel="stylesheet" href="../../../themes/base/ui.base.css"
type="text/css" />
<link rel="stylesheet" href="../../../themes/base/ui.theme.css"
type="text/css" title="ui-theme" />
<script type="text/javascript" src="../../../jquery-1.3.2.js"></script>
@@ -31,7 +31,6 @@
};
});
},
- cache: false,
delay: 0,
change: function(e, ui) {
if (!ui.item) {
@@ -100,7 +99,6 @@
});
</script>
<style>
- body { font-size:62.5%; }
/* TODO shouldn't be necessary */
.ui-button-icon-only .ui-button-text { padding: 0; }
</style>
=======================================
--- /branches/dev/tests/visual/autocomplete/default.html Mon Nov 9
07:37:57 2009
+++ /branches/dev/tests/visual/autocomplete/default.html Wed Nov 18
10:42:53 2009
@@ -2,7 +2,7 @@
<html>
<head>
<title>Autocomplete Visual Test: Default</title>
- <link rel="stylesheet" href="../static.css" type="text/css" />
+ <link rel="stylesheet" href="../visual.css" type="text/css" />
<link rel="stylesheet" href="../../../themes/base/ui.base.css"
type="text/css" />
<link rel="stylesheet" href="../../../themes/base/ui.theme.css"
type="text/css" title="ui-theme" />
<script type="text/javascript" src="../../../jquery-1.3.2.js"></script>
@@ -26,7 +26,6 @@
$("#tags").autocomplete({
source:
["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "pearl"],
- cache: false,
delay: 0,
search: function() {
log("Searching for: " + this.value);
@@ -46,7 +45,6 @@
});
});
</script>
- <style>body { font-size:62.5%; }</style>
</head>
<body>
=======================================
--- /branches/dev/tests/visual/autocomplete/remote-jsonp.html Mon Nov 9
07:54:05 2009
+++ /branches/dev/tests/visual/autocomplete/remote-jsonp.html Wed Nov 18
10:42:53 2009
@@ -2,7 +2,7 @@
<html>
<head>
<title>Autocomplete Visual Test: Remote JSONP</title>
- <link rel="stylesheet" href="../static.css" type="text/css" />
+ <link rel="stylesheet" href="../visual.css" type="text/css" />
<link rel="stylesheet" href="../../../themes/base/ui.base.css"
type="text/css" />
<link rel="stylesheet" href="../../../themes/base/ui.theme.css"
type="text/css" title="ui-theme" />
<script type="text/javascript" src="../../../jquery-1.3.2.js"></script>
@@ -25,9 +25,6 @@
}
$("#city").autocomplete({
- cache: {
- limit: 15
- },
source: function(request, response) {
$.ajax({
url: "http://ws.geonames.org/searchJSON",
@@ -62,7 +59,6 @@
});
</script>
<style>
- body { font-size:62.5%; }
.ui-autocomplete-loading { background: url(indicator.gif) no-repeat
right; }
#city { width: 25em; }
</style>
=======================================
--- /branches/dev/tests/visual/autocomplete/remote.html Mon Nov 9 07:37:57
2009
+++ /branches/dev/tests/visual/autocomplete/remote.html Wed Nov 18 10:42:53
2009
@@ -2,7 +2,7 @@
<html>
<head>
<title>Autocomplete Visual Test: Remote JSON</title>
- <link rel="stylesheet" href="../static.css" type="text/css" />
+ <link rel="stylesheet" href="../visual.css" type="text/css" />
<link rel="stylesheet" href="../../../themes/base/ui.base.css"
type="text/css" />
<link rel="stylesheet" href="../../../themes/base/ui.theme.css"
type="text/css" title="ui-theme" />
<script type="text/javascript" src="../../../jquery-1.3.2.js"></script>
@@ -25,9 +25,6 @@
}
$("#birds").autocomplete({
- cache: {
- limit: 13
- },
source: "search.php",
minLength: 2,
search: function() {
@@ -48,7 +45,6 @@
});
});
</script>
- <style>body { font-size:62.5%; }</style>
</head>
<body>
=======================================
--- /branches/dev/ui/jquery.ui.autocomplete.js Tue Nov 17 19:17:05 2009
+++ /branches/dev/ui/jquery.ui.autocomplete.js Wed Nov 18 10:42:53 2009
@@ -93,7 +93,7 @@
var array = this.options.source;
this.source = function(request, response) {
// escape regex characters
- var matcher = new
RegExp(request.term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|
\\])/gi, "\\$1"), "i");
+ var matcher = new
RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
return $.grep(array, function(value) {
return matcher.test(value);
});
@@ -106,25 +106,6 @@
} else {
this.source = this.options.source;
}
- // proxy with cache provider
- if (this.options.cache) {
- var self = this;
- this.source = (function(source) {
- return function(request) {
- if (self.cache.term == request.term && self.cache.content) {
- return self.cache.content;
- }
- if (new RegExp(self.cache.term).test(request.term) &&
self.cache.content && self.cache.content.length < self.options.cache.limit)
{
- // TODO refactor with array-source above
- var matcher = new
RegExp(request.term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|
\\])/gi, "\\$1"), "i");
- return $.grep(self.cache.content, function(value) {
- return matcher.test(value.result)
- });
- }
- return source.apply(this, arguments);
- }
- })(this.source);
- }
},
search: function(value) {
@@ -141,11 +122,6 @@
function response(content) {
if (content.length) {
content = self.normalize(content);
- // cache response
- if (self.options.cache) {
- self.cache.term = value;
- self.cache.content = content;
- }
self._trigger("open");
self.suggest(content);
} else {
@@ -256,13 +232,14 @@
}
});
-$.ui.autocomplete.defaults = {
- // caching isn't working yet, disable by default for now
- cache: {
- limit: 50
+$.extend($.ui.autocomplete, {
+ defaults: {
+ minLength: 1,
+ delay: 300
},
- minLength: 1,
- delay: 300
-};
+ escapeRegex: function(value) {
+ return value.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1");
+ }
+});
})(jQuery);
--