Author: eallen Date: 2010-03-10 15:18:53 -0500 (Wed, 10 Mar 2010) New Revision: 3865 Modified: mgmt/trunk/cumin/resources/app.css mgmt/trunk/cumin/resources/app.js Log: Javascript and css for incremental search edit box Modified: mgmt/trunk/cumin/resources/app.css =================================================================== --- mgmt/trunk/cumin/resources/app.css 2010-03-10 20:16:43 UTC (rev 3864) +++ mgmt/trunk/cumin/resources/app.css 2010-03-10 20:18:53 UTC (rev 3865) @@ -586,3 +586,15 @@ position: absolute; z-index: 1000; } +.autocomplete{ + cursor: pointer; + border: 1px solid #999; + border-top: none; + background: #fff; + z-index: 2; + padding: 0 0.25em; +} +.autocomplete .normal{border-top: 1px solid #fefefe;} +.autocomplete .selected{background: #ddf;} +.autocomplete .highlited{font-weight: bold; color: #008;} + Modified: mgmt/trunk/cumin/resources/app.js =================================================================== --- mgmt/trunk/cumin/resources/app.js 2010-03-10 20:16:43 UTC (rev 3864) +++ mgmt/trunk/cumin/resources/app.js 2010-03-10 20:18:53 UTC (rev 3865) @@ -473,4 +473,122 @@ selinput.focus(); selinput.selectRange(0, selinput.value.length); } -} \ No newline at end of file +} + + +//+ Jonas Raoni Soares Silva +//@ http://jsfromhell.com/dhtml/incremental-search [rev. #4] + +IncrementalSearch = function(input, callback, className, listObjectID, maxEntries){ + var i, thisObject = this; + thisObject.listObjectID = listObjectID; + thisObject.maxEntries = maxEntries; + (thisObject.input = input).autocomplete = "off", thisObject.callback = callback || function(){}, + thisObject.className = className || "", thisObject.hide(), thisObject.visible = 0; + for(i in {keydown: 0, focus: 0, blur: 0, keyup: 0, keypress: 0}) + this.addEvent(input, i, thisObject._handler, thisObject); +}; +with({p: IncrementalSearch.prototype}){ + //+ Carlos R. L. Rodrigues + //@ http://jsfromhell.com/geral/event-listener [rev. #5] + p.addEvent = function(o, e, f, s){ + var r = o[r = "_" + (e = "on" + e)] = o[r] || (o[e] ? [[o[e], o]] : []), a, c, d; + r[r.length] = [f, s || o], o[e] = function(e){ + try{ + (e = e || event).preventDefault || (e.preventDefault = function(){e.returnValue = false;}); + e.stopPropagation || (e.stopPropagation = function(){e.cancelBubble = true;}); + e.target || (e.target = e.srcElement || null); + e.key = (e.which + 1 || e.keyCode + 1) - 1 || 0; + }catch(f){} + for(d = 1, f = r.length; f; r[--f] && (a = r[f][0], o = r[f][1], a.call ? c = a.call(o, e) : (o._ = a, c = o._(e), o._ = null), d &= c !== false)); + return e = null, !!d; + } + }; + + p.show = function(){ + for(var thisObject = this, s = thisObject.c.style, o = thisObject.input, x = o.offsetLeft, + y = o.offsetTop + o.offsetHeight; o = o.offsetParent; x += o.offsetLeft, y += o.offsetTop); + s.left = x + "px", s.top = y + "px", + thisObject.l.length ? (s.display = "block", !thisObject.visible && (thisObject._callEvent("onshow"), ++thisObject.visible), thisObject.highlite(0)) : s.display = "none"; + }; + p.hide = function(){ + var thisObject = this, d = document, s = (thisObject.c && thisObject.c.parentNode.removeChild(thisObject.c), + thisObject.c = d.body.appendChild(d.createElement("div"))).style; + //thisObject.c.width = thisObject.input.offsetwidth + "px"; + thisObject.l = [], thisObject.i = -1, thisObject.c.className = thisObject.className, s.position = "absolute", s.display = "none"; + thisObject._old = null, thisObject.visible && (thisObject._callEvent("onhide"), --thisObject.visible); + }; + p.add = function(s, x, data){ + var thisObject = this, l = 0, d = document, i = thisObject.l.length, v = thisObject.input.value.length, + o = (thisObject.l[i] = [s, data, thisObject.c.appendChild(d.createElement("div"))])[2]; + if(i >= thisObject.maxEntries) + return; + if(x instanceof Array || (x = [x]), o.i = i, o.className = "normal", !isNaN(x[0])) + for(var j = -1, k = x.length; ++j < k; o.appendChild(d.createTextNode( + s.substring(l, x[j]))).parentNode.appendChild(d.createElement( + "span")).appendChild(d.createTextNode(s.substring(x[j], + l = x[j] + v))).parentNode.className = "highlited"); + for(x in o.appendChild(d.createTextNode(s.substr(l))), {click: 0, mouseover: 0}) + p.addEvent(o, x, thisObject._handler, thisObject); + }; + p.highlite = function(i){ + var thisObject = this; + thisObject._invalid(i) || (thisObject._invalid(thisObject.i) || (thisObject.l[thisObject.i][2].className = "normal"), + thisObject.l[thisObject.i = i][2].className += " selected", thisObject._callEvent("onhighlite", thisObject.l[i][0], thisObject.l[i][1])); + }; + p.select = function(i){ + var thisObject = this; + thisObject._invalid(i = isNaN(i) ? thisObject.i : i) || (thisObject._callEvent("onselect", + thisObject.input.value = thisObject.l[thisObject.i][0], thisObject.l[i][1]), thisObject.hide()); + }; + p.next = function(){ + var thisObject = (thisObject = this, thisObject.highlite((thisObject.i + 1) % thisObject.l.length)); + }; + p.previous = function(){ + var thisObject = (thisObject = this, thisObject.highlite((!thisObject.i ? thisObject.l.length : thisObject.i) - 1)); + }; + p._fadeOut = function(){ + var f = (f = function(){arguments.callee.x.hide();}, f.x = this, setTimeout(f, 200)); + }; + p._handler = function(e){ + var thisObject = this, t = e.type, k = e.key; + t == "focus" || t == "keyup" ? k != 40 && k != 38 && k != 13 && thisObject._old != thisObject.input.value && (thisObject.hide(), thisObject.callback(thisObject, thisObject.input.value)) + : t == "keydown" ? k == 40 ? thisObject.next() : k == 38 ? thisObject.previous() : thisObject._old = thisObject.input.value + : t == "keypress" ? k == 13 && (e.preventDefault(), thisObject.select()) + : t == "blur" ? thisObject._fadeOut() : t == "click" ? thisObject.select() + : thisObject.highlite((/span/i.test((e = e.target).tagName) ? e.parentNode : e).i); + }; + p._invalid = function(i){ + return isNaN(i) || i < 0 || i >= this.l.length; + } + p._callEvent = function(e){ + var thisObject = this; + return thisObject[e] instanceof Function ? thisObject[e].apply(thisObject, [].slice.call(arguments, 1)) : undefined; + }; +} +//-- Searches for multiple matches ---- +function Inc_CIAnywhere(o, search){ + if(search = search.toLowerCase()) { + var ul = $(o.listObjectID); + var list = ul.getElements("li"); + for(var i = -1, l = list.length; ++i < l;){ + /*searches all the matches of "search" and adds the indexes in an array */ + for(var j = 0, indices = []; j = list[i].firstChild.nodeValue.toLowerCase().indexOf(search, j) + 1; + indices[indices.length] = j - 1); + /*if any ocurrence was found, adds the item and pass the position of the matches*/ + if(indices.length) + o.add(list[i].firstChild.nodeValue, indices); + } + } + o.show(); +} +function Inc_CIBeginning(o, search) { + if (search = search.toLowerCase()) { + var ul = $(o.listObjectID); + var list = ul.getElements("li"); + for(var i = -1, l = list.length; ++i < l;) + if( list[i].firstChild.nodeValue.toLowerCase().indexOf(search) == 0) + o.add(list[i].firstChild.nodeValue, 0); + } + o.show(); +}