Johan Känngård » JavaScript

Simple Combobox using Autocompleter.Local from Script.aculo.us

Johan Känngård — Wed, 08 Oct 2008 13:19:20 +0000

The Autocompleter.Local in the Script.aculo.us Prototype-addon is quite nice. It can be used to get type-ahead into a field if you have a local JavaScript Array. I wanted to extend the functionality to have it behave as a Combobox, which is like a Select with a text input field. Here is how I did it, be advised it has some bugs, let me know if you have a better solution!
var Combobox={}; Combobox.Local=Class.create(Autocompleter.Local,{ initialize:function($super,element,update,array,options){ $super(element,update,array,options); this.options.minChars=this.options.minChars||0; Event.observe(this.element,'click',this.onClick.bindAsEventListener(this)); }, onClick:function($super,event){ if(Event.element(event).id){ if(this.active){ this.hasFocus=false; this.active=false; this.hide(); }else{ this.activate(); this.render(); } return; } $super(event); } });
The CSS I use is a modified variant of the Autocompleter.Local wiki page:
.combo { background-image:url(combo_select2.gif); background-repeat:no-repeat; background-position:right top; margin-right:10px; }


.combo:hover {

	background-image:url(combo_select2.gif);

	background-repeat:no-repeat;

	background-position:right -18px;

}
div#autocomplete {

	margin:0px;

	padding:0px;

	width:250px;

	background:#fff;

	border:1px solid #888;

	position:absolute;

}
div#autocomplete ul {

	margin:0px;

	padding:0px;

	list-style-type:none;

}
div#autocomplete ul li.selected {

	background-color:#ffb;

}

div#autocomplete ul li { margin:0; padding:2px; height:12px; display:block; list-style-type:none; cursor:pointer; }
Usage:
new Combobox.Local('textFieldID','outputDivID',array,options);
Example JavaScript:
var cities=new Array('Stockholm','Göteborg','Kiruna'); new Combobox.Local( 'cityField', 'autocomplete', cities, { partialSearch:true, fullSearch:true, partialChars:0, minChars:0 } );
Example HTML:

The Windows XP style combobox image referenced in the CSS can be found here:

Add your own indexOf in the JavaScript Array object

Johan Känngård — Wed, 31 Oct 2007 13:16:45 +0000

Internet Explorer does not have an indexOf method in the Array object. Here is how you can add your own:
if(!Array.indexOf){ Array.prototype.indexOf=function(o){ for(var i=0;i if(this[i]==o) return i; return -1; } }
Use it like this:
var a=new Array(\'aaa\',\'bbb\',\'ccc\'); alert(a.indexOf(\'bbb\')); // Shows 1 as it is the index of \'bbb\' in the a Array. alert(a.indexOf(\'b\')); // Shows -1 since \'b\' is not a member of the a Array.

Setting opacity/transparency on elements using JavaScript

Johan Känngård — Tue, 20 Mar 2007 10:55:42 +0000

Here’s a short snippet to set the opacity of an element:
function setOpacity(e,opacity){ var o=e.style; o.opacity=(opacity/100); //Opera o.MozOpacity=(opacity/100); //Mozilla+Firefox o.KhtmlOpacity=(opacity/100); //Konqueror o.filter="alpha(opacity="+opacity+")"; //IE }
Use it like this:
var e=document.getElementById('myElement'); setOpacity(e, 50);//Sets the opacity to 50%
[tags]JavaScript[/tags]

Cross browser DynamicSelect JavaScript class

Johan Känngård — Wed, 15 Feb 2006 22:02:08 +0000

When developing web applications, select-boxes are usually involved in the UI. I’ve put together a custom JavaScript class to handle things like removing, adding and selecting elements. By the way, Matt Kruse has a bunch of nice JavaScript libraries!

Example:
var e=new DynamicSelect('MySelect'); e.removeAll(); e.append('Entry 1',''); e.append('Entry 2',''); e.selectAll(); e.unselectAll(); e.select('Entry 2'); e.toggleAll(); if(e.contains('Entry 1')){ alert('We got Entry 1!'); } if(e.indexOf('Entry 2'!=-1)){ alert('We got Entry 2!'); } e.insert('Entry 0','',0); e.select('Entry 2'); e.removeSelected(); e.remove(0); alert('Original HTML element name: '+e.parent().name);
The methods are documented in the source file, if you want to know more about them.

DynamicSelect.js

[tags]JavaScript[/tags]

Replacing No documents found

Johan Känngård — Wed, 15 Feb 2006 15:02:10 +0000

This has been done before. Here is my contribution:
/** * Replaces \\\"No Documents Found\\\" with a custom text. * * @author Johan Känngård, http://johankanngard.net * @param message the text to replace with * */ function replaceNoDocumentsFound(message){ var h2=document.getElementsByTagName(\\\'h2\\\'); if(h2!=\\\'undefined\\\'&&h2.length>0&&h2[0]!=\\\'undefined\\\') { var oldTextNode=h2[0].firstChild; var newTextNode=document.createTextNode(message); h2[0].replaceChild(newTextNode,oldTextNode); } }

Put the function in the HTML Head (or in an imported JS-file) and call the function at the bottom at the page like this:

The easiest way to hide the text is via a stylesheet like this:

…but you already knew that, huh?
[tags]JavaScript, DOM, Lotus Domino, CSS[/tags]

Venkman – JavaScript debugger extension for Firefox

Johan Känngård — Sat, 31 Dec 2005 00:41:54 +0000

Via Tom, I found Jim Andertons blog, which mentions Venkman. It is a JavaScript debugger, that can be used to find those irritating small typos and bugs (not written by me of course ;-). It seems to be a jewel, and I will probably use it when I’m back from vacation!

Remove an element in a JavaScript Array

Johan Känngård — Mon, 14 Nov 2005 14:20:23 +0000

If you know the index of the element to remove, you could use the splice method, like this:
var a=['one','two','three','four']; a.splice(1,1); // Removes 1 element from index 1 alert(a); // Results in 'one','three','four'

If you don’t know the index, but the value of the element, you could add a little method to the Array class like this:
Array.prototype.remove=function(s){ for(i=0;i if(s==this[i]) this.splice(i, 1); } } var a=['one','two','three','four']; a.remove('three'); alert(a); // Results in 'one','two','four'