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

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:

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.


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]

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]

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]

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!

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'