r3369 committed - autocomplete: tests cleanup
Revision: 3369
Author: joern.zaefferer
Date: Sat Oct 17 04:40:40 2009
Log: autocomplete: tests cleanup
http://code.google.com/p/jquery-ui/source/detail?r=3369
Added:
/branches/dev/tests/visual/autocomplete/combobox.html
Deleted:
/branches/dev/tests/visual/autocomplete/select.html
Modified:
/branches/dev/tests/visual/autocomplete/remote-jsonp.html
/branches/dev/tests/visual/autocomplete/remote.html
=======================================
--- /dev/null
+++ /branches/dev/tests/visual/autocomplete/combobox.html Sat Oct 17
04:40:40 2009
@@ -0,0 +1,117 @@
+<!doctype html>
+<html>
+<head>
+ <title>Autocomplete Visual Test: Combobox</title>
+ <link rel="stylesheet" href="../static.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.button.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($) {
+ $.widget("ui.selectAutocomplete", {
+ _init: function() {
+ var self = this;
+ var select = this.element.hide();
+ var input = $("<input/>").addClass("ui-widget ui-widget-content
ui-corner-left").insertAfter(select).autocomplete({
+ source: function(request) {
+ var matcher = new RegExp(request.term, "i");
+ return select.children("option").map(function() {
+ var text = $(this).text();
+ if (!request.term || matcher.test(text))
+ return {
+ id: $(this).val(),
+ label: text.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" +
request.term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1")
+ ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"),
+ result: text
+ };
+ });
+ },
+ delay: 0,
+ change: function(e, ui) {
+ if (!ui.item) {
+ // remove invalid value, as it didn't match anything
+ $(this).val("");
+ return;
+ }
+ $(this).focus();
+ select.val(ui.item.id);
+ self._trigger("selected", null, {
+ item: select.find("[value='" + ui.item.id + "']")
+ });
+
+ },
+ minLength: 0
+ });
+ $("<button/>")
+ .html('<span class="ui-icon ui-icon-triangle-1-s"/>')
+ .insertAfter(input)
+ .button().removeClass("ui-corner-all")
+ // TODO remove/replace once button is finished
+ .addClass("ui-corner-right ui-button-icon").css("margin-left", -1)
+ .click(function() {
+ // need to temporarily remove value for search to display all options
+ // find a better solution to avoid the flashing
+ var val = input.val();
+ input.val("").autocomplete("search").val(val);
+ input.focus();
+ });
+ }
+ });
+
+ })(jQuery);
+
+ $(function() {
+ $('<div/>').css({
+ position: "absolute",
+ right: 10,
+ top: 10
+ }).appendTo(document.body).themeswitcher();
+
+ function log(message) {
+ $("<div/>").text(message).prependTo("#log");
+ $("#log").attr("scrollTop", 0);
+ }
+
+ $("select").selectAutocomplete({
+ selected: function(event, ui) {
+ log("Selected " + ui.item.text() + "(#" + ui.item.val() + ")" );
+ }
+ });
+ $("input").focus();
+ });
+ </script>
+ <style>body { font-size:62.5%; }</style>
+</head>
+<body>
+
+<div class="ui-widget">
+ <label>Tags: </label>
+ <select>
+ <option value="a">asp</option>
+ <option value="c">c</option>
+ <option value="cpp">c++</option>
+ <option value="cf">coldfusion</option>
+ <option value="g">groovy</option>
+ <option value="h">haskell</option>
+ <option value="j">java</option>
+ <option value="js">javascript</option>
+ <option value="p1">pearl</option>
+ <option value="p2">php</option>
+ <option value="p3">python</option>
+ <option value="r">ruby</option>
+ <option value="s">scala</option>
+ </select>
+</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/visual/autocomplete/select.html Wed Sep 30 14:39:46
2009
+++ /dev/null
@@ -1,117 +0,0 @@
-<!doctype html>
-<html>
-<head>
- <title>Autocomplete Visual Test: Default</title>
- <link rel="stylesheet" href="../static.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.button.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($) {
- $.widget("ui.selectAutocomplete", {
- _init: function() {
- var self = this;
- var select = this.element.hide();
- var input = $("<input/>").addClass("ui-widget ui-widget-content
ui-corner-left").insertAfter(select).autocomplete({
- source: function(request) {
- var matcher = new RegExp(request.term, "i");
- return select.children("option").map(function() {
- var text = $(this).text();
- if (!request.term || matcher.test(text))
- return {
- id: $(this).val(),
- label: text.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" +
request.term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1")
+ ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"),
- result: text
- };
- });
- },
- delay: 0,
- change: function(e, ui) {
- if (!ui.item) {
- // remove invalid value, as it didn't match anything
- $(this).val("");
- return;
- }
- $(this).focus();
- select.val(ui.item.id);
- self._trigger("selected", null, {
- item: select.find("[value='" + ui.item.id + "']")
- });
-
- },
- minLength: 0
- });
- $("<button/>")
- .html('<span class="ui-icon ui-icon-triangle-1-s"/>')
- .insertAfter(input)
- .button().removeClass("ui-corner-all")
- // TODO remove/replace once button is finished
- .addClass("ui-corner-right ui-button-icon").css("margin-left", -1)
- .click(function() {
- // need to temporarily remove value for search to display all options
- // find a better solution to avoid the flashing
- var val = input.val();
- input.val("").autocomplete("search").val(val);
- input.focus();
- });
- }
- });
-
- })(jQuery);
-
- $(function() {
- $('<div/>').css({
- position: "absolute",
- right: 10,
- top: 10
- }).appendTo(document.body).themeswitcher();
-
- function log(message) {
- $("<div/>").text(message).prependTo("#log");
- $("#log").attr("scrollTop", 0);
- }
-
- $("select").selectAutocomplete({
- selected: function(event, ui) {
- log("Selected " + ui.item.text() + "(#" + ui.item.val() + ")" );
- }
- });
- $("input").focus();
- });
- </script>
- <style>body { font-size:62.5%; }</style>
-</head>
-<body>
-
-<div class="ui-widget">
- <label>Tags: </label>
- <select>
- <option value="a">asp</option>
- <option value="c">c</option>
- <option value="cpp">c++</option>
- <option value="cf">coldfusion</option>
- <option value="g">groovy</option>
- <option value="h">haskell</option>
- <option value="j">java</option>
- <option value="js">javascript</option>
- <option value="p1">pearl</option>
- <option value="p2">php</option>
- <option value="p3">python</option>
- <option value="r">ruby</option>
- <option value="s">scala</option>
- </select>
-</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/visual/autocomplete/remote-jsonp.html Sat Oct 17
04:39:42 2009
+++ /branches/dev/tests/visual/autocomplete/remote-jsonp.html Sat Oct 17
04:40:40 2009
@@ -1,7 +1,7 @@
<!doctype html>
<html>
<head>
- <title>Autocomplete Visual Test: Default</title>
+ <title>Autocomplete Visual Test: Remote JSONP</title>
<link rel="stylesheet" href="../static.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" />
=======================================
--- /branches/dev/tests/visual/autocomplete/remote.html Tue Sep 29 15:02:16
2009
+++ /branches/dev/tests/visual/autocomplete/remote.html Sat Oct 17 04:40:40
2009
@@ -1,7 +1,7 @@
<!doctype html>
<html>
<head>
- <title>Autocomplete Visual Test: Default</title>
+ <title>Autocomplete Visual Test: Remote JSON</title>
<link rel="stylesheet" href="../static.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" />