Devthought - Guillermo Rauch’s Blog

Click here to see Javascript code

1. var FacebookList = new Class({
2.  
3. Extends: TextboxList,
4.  
5. data: [],
6.  
7. options: {
8. onInputFocus: function() { this.autoShow(); },
9. onInputBlur: function(el) {
10. el.value = '';
11. this.autoHide();
12. },
13. onBoxDispose: function(item) {
14. this.autoFeed(item.$attributes.$text);
15. },
16. autocomplete: {
17. 'opacity': 0.8,
18. 'maxresults': 10,
19. 'minchars': 1
20. }
21. },
22.  
23. initialize: function(element, autoholder, options) {
24. arguments.callee.parent(element, options);
25. this.autoholder = $(autoholder).set('opacity', this.options.autocomplete.opacity);
26. this.autoresults = this.autoholder.getElement('ul');
27. var children = this.autoresults.getElements('li');
28. children.each(function(el) { this.add(el.innerHTML); }, this);
29. },
30.  
31. autoShow: function(search) {
32. this.autoholder.setStyle('display', 'block');
33. this.autoholder.getElements('*').setStyle('display', 'none');
34. if(! search || ! search.trim() || (! search.length || search.length < this.options.autocomplete.minchars ))
35. {
36. this.autoholder.getElement('.default').setStyle('display', 'block');
37. this.resultsshown = false;
38. } else {
39. this.resultsshown = true;
40. this.autoresults.setStyle('display', 'block').empty();
41. this.data.filter(function(str) { return str ? str.test(search, 'i') : false; }).each(function(result, ti) {
42. if(ti >= this.options.autocomplete.maxresults) return;
43. var el = new Element('li').set('html', this.autoHighlight(result, search)).inject(this.autoresults);
44. el.$attributes.$result = result;
45. if(ti == 0) this.autoFocus(el);
46. }, this);
47. }
48. },
49.  
50. autoHighlight: function(html, highlight) {
51. return html.replace(new RegExp(highlight, 'gi'), function(match) {
52. return '<em>' + match + '</em>';
53. });
54. },
55.  
56. autoHide: function() {
57. this.resultsshown = false;
58. this.autoholder.setStyle('display', 'none');
59. },
60.  
61. autoFocus: function(el) {
62. if(! el) return;
63. if(this.autocurrent) this.autocurrent.removeClass('auto-focus');
64. this.autocurrent = el.addClass('auto-focus');
65. },
66.  
67. autoMove: function(direction) {
68. if(!this.resultsshown) return;
69. this.autoFocus(this.autocurrent['get' + (direction == 'up' ? 'Previous' : 'Next')]());
70. },
71.  
72. autoFeed: function(text) {
73. if(this.data.indexOf(text) == -1)
74. this.data.push(text);
75. },
76.  
77. autoAdd: function(el) {
78. if(!el || ! el.$attributes.$result) return;
79. this.add(el.$attributes.$result);
80. delete this.data[this.data.indexOf(el.$attributes.$result)];
81. this.autoHide();
82. this.current.$attributes.$input.value = '';
83. },
84.  
85. createInput: function(options) {
86. var li = arguments.callee.parent(options);
87. var input = li.$attributes.$input;
88. input.addEvents({
89. 'keydown': function(e) {
90. e = new Event(e);
91. this.dosearch = false;
92. switch(e.code) {
93. case Event.Keys.up: return this.autoMove('up');
94. case Event.Keys.down: return this.autoMove('down');
95. case Event.Keys.enter:
96. this.autoAdd(this.autocurrent);
97. this.autocurrent = false;
98. this.autoenter = true;
99. break;
100. default: this.dosearch = true;
101. }
102. }.bind(this),
103. 'keyup': function() {
104. if(this.dosearch) this.autoShow(input.value);
105. }.bind(this)
106. });
107. input.addEvent(Browser.Engine.trident ? 'keydown' : 'keypress', function(e) {
108. if(this.autoenter) new Event(e).stop();
109. this.autoenter = false;
110. }.bind(this));
111. return li;
112. },
113.  
114. createBox: function(text, options) {
115. var li = arguments.callee.parent(text, options);
116. li.addEvents({
117. 'mouseenter': function() { this.addClass('bit-hover') },
118. 'mouseleave': function() { this.removeClass('bit-hover') }
119. });
120. li.adopt(new Element('a', {
121. 'href': '#',
122. 'class': 'closebutton',
123. 'events': {
124. 'click': function(e) {
125. new Event(e).stop();
126. if(! this.current) this.focus(this.maininput);
127. this.dispose(li);
128. }.bind(this)
129. }
130. }));
131. li.$attributes.$text = text;
132. return li;
133. }
134.  
135. });
136.  
137. window.addEvent('domready', function() {
138. // init
139. var tlist2 = new FacebookList('facebook-demo', 'facebook-auto');
140.  
141. // fetch and feed
142. new Request.JSON({'url': 'json.html', 'onComplete': function(j) {
143. j.each(tlist2.autoFeed, tlist2);
144. }}).send();
145. });