r3470 committed - autocomplete: ...

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);
--