Posted By

Leech on 07/21/06


Tagged

class search suggest


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

mate
jkochis
shachi


Incremental Search v1.3


 / Published in: JavaScript
 

URL: http://jsfromhell.com/dhtml/incremental-search

Auto-complete for inputs similar to gmail. Created: 2005.08.06 - Modified: 2006.01.17

  1. /**************************************
  2. * Jonas Raoni Soares Silva
  3. * http://www.joninhas.ath.cx
  4. **************************************/
  5.  
  6. //=============================================================
  7. // REQUIRES http://www.jsfromhell.com/geral/event-listener v1.3
  8. //=============================================================
  9.  
  10. IncrementalSearch = function(input, callback, className){ //v1.3
  11. var i, $ = this;
  12. ($.input = input).autocomplete = "off", $.callback = callback || function(){},
  13. $.className = className || "", $.hide(), $.visible = 0;
  14. for(i in {keydown: 0, focus: 0, blur: 0, keyup: 0, keypress: 0})
  15. addEvent(input, i, $._handler, $);
  16. };
  17. with({p: IncrementalSearch.prototype}){
  18. p.show = function(){
  19. for(var $ = this, s = $.c.style, o = $.input, x = o.offsetLeft,
  20. y = o.offsetTop + o.offsetHeight; o = o.offsetParent; x += o.offsetLeft, y += o.offsetTop);
  21. s.left = x + "px", s.top = y + "px",
  22. $.l.length ? (s.display = "block", !$.visible && ($._callEvent("onshow"), ++$.visible), $.highlite(0)) : s.display = "none";
  23. };
  24. p.hide = function(){
  25. var $ = this, d = document, s = ($.c && $.c.parentNode.removeChild($.c),
  26. $.c = d.body.appendChild(d.createElement("div"))).style;
  27. $.l = [], $.i = -1, $.c.className = $.className, s.position = "absolute", s.display = "none";
  28. $._old = null, $.visible && ($._callEvent("onhide"), --$.visible);
  29. };
  30. p.add = function(s, x, data){
  31. var $ = this, l = 0, d = document, i = $.l.length, v = $.input.value.length,
  32. o = ($.l[i] = [s, data, $.c.appendChild(d.createElement("div"))])[2];
  33. if(x instanceof Array || (x = [x]), o.i = i, o.className = "normal", !isNaN(x[0]))
  34. for(var j = -1, k = x.length; ++j < k; o.appendChild(d.createTextNode(
  35. s.substring(l, x[j]))).parentNode.appendChild(d.createElement(
  36. "span")).appendChild(d.createTextNode(s.substring(x[j],
  37. l = x[j] + v))).parentNode.className = "highlited");
  38. for(x in o.appendChild(d.createTextNode(s.substr(l))), {click: 0, mouseover: 0})
  39. addEvent(o, x, $._handler, $);
  40. };
  41. p.highlite = function(i){
  42. var $ = this;
  43. $._invalid(i) || ($._invalid($.i) || ($.l[$.i][2].className = "normal"),
  44. $.l[$.i = i][2].className += " selected", $._callEvent("onhighlite", $.l[i][0], $.l[i][1]));
  45. };
  46. p.select = function(i){
  47. var $ = this;
  48. $._invalid(i = isNaN(i) ? $.i : i) || ($._callEvent("onselect",
  49. $.input.value = $.l[$.i][0], $.l[i][1]), $.hide());
  50. };
  51. p.next = function(){
  52. var $ = ($ = this, $.highlite(($.i + 1) % $.l.length));
  53. };
  54. p.previous = function(){
  55. var $ = ($ = this, $.highlite((!$.i ? $.l.length : $.i) - 1));
  56. };
  57. p._fadeOut = function(){
  58. var f = (f = function(){arguments.callee.x.hide();}, f.x = this, setTimeout(f, 200));
  59. };
  60. p._handler = function(e){
  61. var $ = this, t = e.type, k = e.key;
  62. t == "focus" || t == "keyup" ? k != 40 && k != 38 && k != 13 && $._old != $.input.value && ($.hide(), $.callback($, $.input.value))
  63. : t == "keydown" ? k == 40 ? $.next() : k == 38 ? $.previous() : $._old = $.input.value
  64. : t == "keypress" ? k == 13 && (e.preventDefault(), $.select())
  65. : t == "blur" ? $._fadeOut() : t == "click" ? $.select()
  66. : $.highlite((/span/i.test((e = e.target).tagName) ? e.parentNode : e).i);
  67. };
  68. p._invalid = function(i){
  69. return isNaN(i) || i < 0 || i >= this.l.length;
  70. }
  71. p._callEvent = function(e){
  72. var $ = this;
  73. return $[e] instanceof Function ? $[e].apply($, [].slice.call(arguments, 1)) : undefined;
  74. };
  75. }

Report this snippet  

You need to login to post a comment.