Author: sevein
Date: Fri Apr 20 14:41:57 2012
New Revision: 11481
Log:
Update autocomplete code to handle search realm
Modified:
branches/2.0/js/dominion.js
Modified: branches/2.0/js/dominion.js
==============================================================================
--- branches/2.0/js/dominion.js Fri Apr 20 14:35:56 2012 (r11480)
+++ branches/2.0/js/dominion.js Fri Apr 20 14:41:57 2012 (r11481)
@@ -33,9 +33,11 @@
var Autocomplete = function (element)
{
this.$element = element;
- this.$menu = $('<div id="search-suggestions"></div>').appendTo('body');
+ this.$menu = $('<div id="search-suggestions"
class="search-popover"></div>').appendTo('body');
+ this.$realm = this.$element.parent().find('#search-realm');
+
+ this.source = this.$element.closest('form').data('autocomplete');
this.shown = false;
- this.source = element.closest('form').data('autocomplete');
this.timeout = 150;
this.listen();
@@ -45,24 +47,61 @@
constructor: Autocomplete,
- show: function()
+ listen: function()
+ {
+ $(window)
+ .on('resize', $.proxy(this.resize, this));
+
+ this.$element
+ .on('focus', $.proxy(this.focus, this))
+ .on('blur', $.proxy(this.blur, this))
+ .on('keypress', $.proxy(this.keypress, this))
+ .on('keyup', $.proxy(this.keyup, this));
+
+ if ($.browser.webkit || $.browser.msie)
+ {
+ this.$element.on('keydown', $.proxy(this.keypress, this));
+ }
+
+ this.$menu.on('mouseenter', 'li', $.proxy(this.mouseenter, this));
+ },
+
+ resize: function()
+ {
+ this.hide();
+ this.hideRealm();
+ },
+
+ locate: function ($item)
{
- var pos = $.extend({}, this.$element.offset(), {
- height: this.$element[0].offsetHeight
+ var pos = $.extend({}, this.$element.position(), {
+ height: this.$element[0].offsetHeight,
+ width: this.$element.outerWidth()
});
- this.$menu.css(
- {
- top: pos.top + pos.height,
- left: pos.left
- });
+ return $item.css({
+ width: pos.width,
+ top: pos.top + pos.height,
+ left: pos.left });
+ },
- this.$menu.show();
+ show: function()
+ {
+ this.hideRealm();
+ this.locate(this.$menu).show();
this.shown = true;
return this;
},
+ showRealm: function (e)
+ {
+ this.hide();
+ this.locate(this.$realm).show();
+
+ return this;
+ },
+
hide: function()
{
this.$menu.hide();
@@ -71,19 +110,27 @@
return this;
},
+ hideRealm: function (e)
+ {
+ this.$realm.hide();
+ },
+
lookup: function (e)
{
- this.query = this.$element.val();
+ var query = this.$element.val();
- if (!this.query)
+ if (!query)
{
- return this.shown ? this.hide() : this;
+ this.hide();
+ this.showRealm();
+
+ return this;
}
$.ajax(this.source,
{
context: this,
- data: { query: this.query },
+ data: { query: query },
dataType: 'html'
})
.done(function(html)
@@ -108,22 +155,7 @@
next: function (e) { },
prev: function (e) { },
- select: function(e) { },
-
- listen: function()
- {
- this.$element
- .on('blur', $.proxy(this.blur, this))
- .on('keypress', $.proxy(this.keypress, this))
- .on('keyup', $.proxy(this.keyup, this));
-
- if ($.browser.webkit || $.browser.msie)
- {
- this.$element.on('keydown', $.proxy(this.keypress, this));
- }
-
- this.$menu.on('mouseenter', 'li', $.proxy(this.mouseenter, this));
- },
+ select: function (e) { },
keyup: function (e)
{
@@ -194,16 +226,25 @@
e.stopPropagation();
},
- blur: function(e)
+ blur: function (e)
{
var self = this;
setTimeout(function ()
{
self.hide();
+ self.$realm.hide();
}, 150);
},
- mouseenter: function(e)
+ focus: function (e)
+ {
+ this.$element.val('');
+ this.showRealm();
+
+ return this;
+ },
+
+ mouseenter: function (e)
{
this.$menu.find('active').removeClass('active');
$(e.currentTarget).addClass('active');
--
You received this message because you are subscribed to the Google Groups
"Qubit Toolkit Commits" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/qubit-commits?hl=en.
