@@ -2,31 +2,80 @@
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
-<head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>autocomplete</title>
- <meta name="generator" content="TextMate http://macromates.com/">
- <meta name="author" content="Yehuda Katz">
- <link rel="stylesheet" href="jquery.ui.autocomplete.css" type="text/css" media="screen" />
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <title>autocomplete</title>
+ <meta name="generator" content="TextMate http://macromates.com/">
+ <meta name="author" content="Yehuda Katz">
+ <link rel="stylesheet" href="jquery.ui.autocomplete.css" type="text/css" media="screen" />
+ <style type="text/css">
+ .matching {
+ font-weight: bold;
+ text-decoration: underline;
+ }
+ </style>
+
<script src="jquery.js"></script>
- <script src="jquery.dimensions.js"></script>
+ <script src="jquery.dimensions.js"></script>
<script src="jquery.templating.js"></script>
<script src="jquery.ui.autocomplete.ext.js"></script>
<script src="jquery.ui.autocomplete.js"></script>
<script>
+ console = typeof(console) !== 'undefined' ? console : {};
+ console.log = typeof(console.log) !== 'undefined' ? console.log : function(msg) { $('#log').html(msg + '<br/>\n' + $('#log').html() ); };
+
$(function() {
- $("input.autocomplete").autocomplete({
- ajax: "list",
+ $("input.autocomplete.0").autocomplete({
+ ajax: "list",
match: function(typed) { return this.text.match(new RegExp(typed)); },
insertText: function(obj) { return obj.text },
templateText: "<li>Hey: <%= text %></li>"
})
+
+ var list1 = [{text: 'Curious George'}, {text: 'George of the Jungle'}, {text: 'Felix the Cat'}];
+ $("input.autocomplete.1").autocomplete({
+ list: list1,
+ match: function(typed) {
+ this.typed = typed;
+ this.pre_match = this.text;
+ this.match = this.post_match = '';
+ if (!this.ajax && !typed || typed.length == 0) { return true; }
+ var match_at = this.text.search(new RegExp("\\b" + typed, "i"));
+ if (match_at != -1) {
+ this.pre_match = this.text.slice(0,match_at);
+ this.match = this.text.slice(match_at,match_at + typed.length);
+ this.post_match = this.text.slice(match_at + typed.length);
+ return true;
+ }
+ return false;
+ },
+ insertText: function(obj) { return obj.text },
+ templateText: "<li><%= pre_match %><span class='matching' ><%= match %></span><%= post_match %></li>"
+ });
+
+ $("input.autocomplete.2").autocomplete({
+ ajax: "list",
+ match: function(typed) { return this.text.match(new RegExp(typed, "i")); },
+ insertText: function(obj) { return obj.text },
+ templateText: "<li>Hey: <%= text %></li>"
+ })
+
+ $("input.autocomplete")
.bind("activate.autocomplete", function(e, d) { console.log(d); })
.bind("cancel.autocomplete", function(e) { console.log("Cancelled"); });
});
+
+
</script>
</head>
<body>
- <input type="text" class="autocomplete" autocomplete="off" />
+ <input type="text" class="autocomplete 0" />
+
+ <br />
+ <form onsubmit="return false;">
+ <input type="text" class="autocomplete 1" />
+ <input type="text" class="autocomplete 2" />
+ </form>
+<div id="log"></div>
</body>
</html>
autocomplete.html
@@ -11,7 +11,7 @@
*/
/*
- * @description Form autocomplete plugin using preloaded or Ajax JSON data source
+ * @description Form autocomplete plugin using preloaded or Ajax JSON data source
*
* @example $('input#user-name').autocomplete({list: ["quentin", "adam", "admin"]})
* @desc Simple autocomplete with basic JSON data source
@@ -20,60 +20,75 @@
* @desc Simple autocomplete with Ajax loaded JSON data source
*
*/
-
+
(function($) {
-
+
$.ui = $.ui || {}; $.ui.autocomplete = $.ui.autocomplete || {}; var active;
-
+
+ var KEY = {
+ ESC: 27,
+ RETURN: 13,
+ TAB: 9,
+ BS: 8,
+ DEL: 46,
+ UP: 38,
+ DOWN: 40
+ };
+
$.fn.autocompleteMode = function(container, input, size, opt) {
var original = input.val(); var selected = -1; var self = this;
-
+
$.data(document.body, "autocompleteMode", true);
- $("body").one("cancel.autocomplete", function() {
- input.trigger("cancel.autocomplete"); $("body").trigger("off.autocomplete"); input.val(original);
+ $("body").one("cancel.autocomplete", function() {
+ input.trigger("cancel.autocomplete"); $("body").trigger("off.autocomplete"); input.val(original);
});
-
+
$("body").one("activate.autocomplete", function() {
- input.trigger("activate.autocomplete", [$.data(active[0], "originalObject")]); $("body").trigger("off.autocomplete");
+ // Try hitting return to activate autocomplete and then hitting it again on blank input
+ // to close it. w/o checking the active object first this input.trigger() will barf.
+ active && input.trigger("activate.autocomplete", [$.data(active[0], "originalObject")]);
+ $("body").trigger("off.autocomplete");
});
-
+
$("body").one("off.autocomplete", function(e, reset) {
container.remove();
$.data(document.body, "autocompleteMode", false);
input.unbind("keydown.autocomplete");
$("body").add(window).unbind("click.autocomplete").unbind("cancel.autocomplete").unbind("activate.autocomplete");
});
-
+
// If a click bubbles all the way up to the window, close the autocomplete
$(window).bind("click.autocomplete", function() { $("body").trigger("cancel.autocomplete"); });
var select = function() {
active = $("> *", container).removeClass("active").slice(selected, selected + 1).addClass("active");
- input.trigger("itemSelected.autocomplete", [$.data(active[0], "originalObject")]);
+ input.trigger("itemSelected.autocomplete", [$.data(active[0], "originalObject")]);
input.val(opt.insertText($.data(active[0], "originalObject")));
};
-
+
container.mouseover(function(e) {
// If you hover over the container, but not its children, return
if(e.target == container[0]) return;
// Set the selected item to the item hovered over and make it active
selected = $("> *", container).index($(e.target).is('li') ? $(e.target)[0] : $(e.target).parents('li')[0]); select();
}).bind("click.autocomplete", function(e) {
- $("body").trigger("activate.autocomplete"); $.data(document.body, "suppressKey", false);
+ $("body").trigger("activate.autocomplete"); $.data(document.body, "suppressKey", false);
});
-
+
input
.bind("keydown.autocomplete", function(e) {
- if(e.which == 27) { $("body").trigger("cancel.autocomplete"); }
- else if(e.which == 13) { $("body").trigger("activate.autocomplete"); }
- else if(e.which == 40 || e.which == 9 || e.which == 38) {
- switch(e.which) {
- case 40:
- case 9:
+ var k = e.which || e.keyCode; // in IE e.which is undefined
+
+ if(k == KEY.ESC) { $("body").trigger("cancel.autocomplete"); }
+ else if(k == KEY.RETURN) { $("body").trigger("activate.autocomplete"); }
+ else if(k == KEY.UP || k == KEY.TAB || k == KEY.DOWN) {
+ switch(k) {
+ case KEY.DOWN:
+ case KEY.TAB:
selected = selected >= size - 1 ? 0 : selected + 1; break;
- case 38:
+ case KEY.UP:
selected = selected <= 0 ? size - 1 : selected - 1; break;
default: break;
}
@@ -82,9 +97,9 @@
$.data(document.body, "suppressKey", true);
});
};
-
+
$.fn.autocomplete = function(opt) {
-
+
opt = $.extend({}, {
timeout: 1000,
getList: function(input) { input.trigger("updateList", [opt.list]); },
@@ -103,18 +118,19 @@
} }
return this.each(function() {
-
+
$(this)
.keypress(function(e) {
var typingTimeout = $.data(this, "typingTimeout");
+ var k = e.keyCode || e.which; // keyCode == 0 in Gecko/FF on keypress
if(typingTimeout) window.clearInterval(typingTimeout);
-
+
if($.data(document.body, "suppressKey"))
return $.data(document.body, "suppressKey", false);
- else if($.data(document.body, "autocompleteMode") && e.charCode < 32 && e.keyCode != 8 && e.keyCode != 46) return false;
- else {
- $.data(this, "typingTimeout", window.setTimeout(function() {
- $(e.target).trigger("autocomplete");
+ else if($.data(document.body, "autocompleteMode") && k < 32 && k != KEY.BS && k != KEY.DEL) return false;
+ else if (k != KEY.TAB && k != KEY.ESC) { // don't start the meter running if we are tabbing out or escaping this nuthouse
+ $.data(this, "typingTimeout", window.setTimeout(function() {
+ $(e.target).trigger("autocomplete");
}, opt.timeout));
}
})
@@ -127,21 +143,21 @@
.map(function() {
var node = $(opt.template(this))[0];
$.data(node, "originalObject", this);
- return node;
+ return node;
});
-
+
$("body").trigger("off.autocomplete");
-
+
if(!list.length) return false;
-
+
var container = list.wrapAll(opt.wrapper).parents(":last").children();
-
+
var offset = self.offset();
-
+
opt.container = container
.css({top: offset.top + self.outerHeight(), left: offset.left, width: self.width()})
.appendTo("body");
-
+
$("body").autocompleteMode(container, self, list.length, opt);
});
@@ -150,5 +166,5 @@
});
};
-
+
})(jQuery);
jquery.ui.autocomplete.js
1dbbaa3198a9fae6726ec2c0f2115a54fa60beea
Ian Struble
istruble@gmail.com
http://github.com/istruble/jquery-autocomplete/commit/723d7ac6ffdbee6839f47ec8ed5823e385059909
723d7ac6ffdbee6839f47ec8ed5823e385059909
2008-04-12T12:51:00-07:00
2008-04-12T12:46:51-07:00
Safari-mac TAB behavior cleaned up and fixed RET-RET bug.
Tabbing in Safari-mac to another field was
- moving the selection (good)
- updating the input field (good)
- moving focus to the next tab w/o ending the autocomplete (bad)
Now only cycles selection on TAB if active and lets the browser do
what it wants if not active.
Hitting RET-RET on an empty input field was:
- activating autocomplete on RET (good)
- throwing an error and remaining active on 2nd RET (bad)
Now it just closes on the second RET press.
Also changed the key calculation for keydown or keypressed events
to match browser key input quirks based on info at
http://unixpapa.com/js/key.html
c96a148cea2c008204bda55535e5c3b4e678b59d
Ian Struble
istruble@gmail.com