TextboxList meets Autocompletion

TextboxList Autocompletion

Demo here

In my previous blogpost I explained how to extend TextboxList to add closing functionality via a link added to each box. But it was missing an important ingredient: autocompletion!

Again, all we have to do is extend the TextboxList class, override some methods, some events, and create some new ones (all prefixed by auto)

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

It works by caching all the results from a JSON Request and feeding them to the autocompleter object. When a item is added as a box, it’ removed from the feed array, and when the box is disposed it’s added back, so that it becomes available in the list when the user types.

Another new feature is that you’ll be able to let it add boxes from the HTML directly:

Click here to see HTML code

  1. <label>FacebookList input</label>
  2. <input type="text" value="" id="facebook-demo" />
  3. <div id="facebook-auto">
  4. <div class="default">Type the name of an argentine writer you like</div>
  5. <ul class="feed">
  6. <li>Jorge Luis Borges</li>
  7. <li>Julio Cortazar</li>
  8. </ul>
  9. </div>

The constructor now takes new parameters to configure the autocompletion, like the minimum number of characters to trigger the dropdown, and more.

Changelog

  • 0.1: initial release
  • 0.2: added click support, removed $attributes use, code cleanup

Download

Click here to download the zip with code and examples

Tags: Article, Browsers, CSS, Javascript, Project on January 12th, 2008

118 Responses to “TextboxList meets Autocompletion”

Pages: « 8 [7] 6 5 4 3 2 1 » Show All

  1. 105
    Rainmore Says:
    May 14th, 2008 at 11:06 pm

    After going through all the notes, I summary some Q&A hereAfter going through all the notes, I summary some Q&A here:
    Q:The script doesn’t work on dropdown list? Or No dropdown list ?
    A: Please change the following file name to .php, .asp or .jsp rather than .html
    Eg:
    json.html ->json.php
    test.html -> test.php

    Q: Can’t upload the list?
    A: 2 steps
    1. Modify test.php (if you had change the extension of test.html) or test.html
    a. Add name and id to the form as “facebook-form”;

    b. Add name to the input where id = “facebook-demo”;

    c. Add submit button within the form

    2. Add a script to the file test.js at line 172 or add the script within the funciton window.addEvent(‘domread’,function()) as
    $(’facebook-form’).addEvent(’submit’,function(){ // facebook-form is the form id
    tlist2.update();
    })
    After the change the function should be:

    window.addEvent(’domready’, function() {
    // init
    var tlist2 = new FacebookList(’facebook-demo’, ‘facebook-auto’);

    // fetch and feed
    new Request.JSON({’url’: ‘namelist.php’, ‘onComplete’: function(j) {
    j.each(tlist2.autoFeed, tlist2);
    }}).send();

    $(’facebook-form’).addEvent(’submit’,function(){ // facebook-form is the form id
    tlist2.update();
    })
    });

    HTH!!!!

  2. 104
    Rainmore Says:
    May 14th, 2008 at 10:53 pm

    That’s a great script. Thanks!!

    Well, I met a problem here that I can’t input any other name but only the name from file.

    How can I submit the name from either the list file or from the input by myself?

    Thanks for the help.

    Rainmore

  3. 103
    Milestone 01 - 70+ High-End Components for Web Designers and Developers : DevKick Blog Says:
    May 13th, 2008 at 6:02 pm

    [...] TextboxList / Mootools [...]

  4. 102
    60 More AJAX- and Javascript Solutions For Professional Coding | Web Tools | Web Design & Graphic Design Blog Says:
    May 5th, 2008 at 2:23 am

    [...] Facebook Style Input Box The approach to re-create the autocomplete method of adding multiple recipients to messages used on Facebook. “I’d seen it in Facebook before, which has a really decent implementation of this concept (it work well, but it doesn’t respect any modern programming principles; basically, it’s a big tag soup with lots of inline Javascript)” [...]

  5. 101
    fedmich Says:
    May 1st, 2008 at 3:34 pm

    Thanks for the script :)

  6. 100
    webpixelkonsum Says:
    April 21st, 2008 at 6:12 pm

    Great idea to improve the feedback for the user. Beside that thank you the possibility to get the source coude for free ;)

    Ralph

  7. 99
    Facebook Style Input Box - .:咸湿鱼 Says:
    April 21st, 2008 at 6:26 am

    [...] 一款Facebook风格的自动完成输入框 [...]

  8. 98
    AJAX and Javascript Solutions For Professional Coding - The Arts Lab TurkeY Says:
    April 20th, 2008 at 1:19 pm

    [...] Facebook Style Input Box The approach to re-create the autocomplete method of adding multiple recipients to messages used on Facebook. “I’d seen it in Facebook before, which has a really decent implementation of this concept (it work well, but it doesn’t respect any modern programming principles; basically, it’s a big tag soup with lots of inline Javascript)” [...]

  9. 97
    links for 2008-04-18 - The Boltzmann Constant Says:
    April 18th, 2008 at 11:37 am

    [...] TextboxList meets Autocompletion (tags: JavaScript Forms Ajax web2.0 JQuery) [...]

  10. 96
    Guillermo Rauch Says:
    April 16th, 2008 at 8:45 pm

    @Craig
    The update() method takes care of that. You can either call it yourself or add it to the blur() method, which is what the upcoming version does (since so many people asked).
    Nice website, by the way.

  11. 95
    Craig Says:
    April 16th, 2008 at 8:38 pm

    Excellent work by the way. Love it. Ive noticed though that it isnt populating any kind of hidden fields so that you can POST the information with a submit button? Is this something you are looking to add?

  12. 94
    60 профессиональных AJAX и JavaScript решений Says:
    April 16th, 2008 at 4:54 pm

    [...] Facebook Style Input Box Скрипт комбинирует метод автодополнения и добавление нескольких адресатов к сообщению, такой инструмент используется в  Facebook. “I’d seen it in Facebook before, which has a really decent implementation of this concept (it work well, but it doesn’t respect any modern programming principles; basically, it’s a big tag soup with lots of inline Javascript)” [...]

  13. 93
    Sean O Says:
    April 16th, 2008 at 11:25 am

    Very Cool. Any jQuery implementation of this, or something similar?

  14. 92
    60 solutions en AJAX - BLoOgLe Says:
    April 16th, 2008 at 9:12 am

    [...] text : à la Facebook, ou [...]

  15. 91
    60 More AJAX- and Javascript Solutions For Professional Coding | Developer's Toolbox | Smashing Magazine Says:
    April 15th, 2008 at 12:03 pm

    [...] Facebook Style Input BoxThe approach to re-create the autocomplete method of adding multiple recipients to messages used on Facebook. “I’d seen it in Facebook before, which has a really decent implementation of this concept (it work well, but it doesn’t respect any modern programming principles; basically, it’s a big tag soup with lots of inline Javascript)” [...]

Pages: « 8 [7] 6 5 4 3 2 1 » Show All

Leave a Reply

« TextboxList: Fancy Facebook-Like dynamic inputs! How Flash currently aids Javascript development »