PDA

View Full Version : Combo Box (similar to select drop-down display)

jmrker
04-06-2010, 03:56 AM
Simple Combo Box display.

Has 3 different displays (simple, lists and table formats) -- uncomment or remove unwanted sections
Color / Size can be changed with CSS modifications.
Can have scrolling display (optional) for limited screen real estate
External file can contain data to display. Easy to modify contents / fields.


<html>
<head>
<title>Combo Box</title>

<style type="text/css">
.oddRow { background-color: #CCC; }
.evenRow { background-color: #DDD; }
</style>

<!-- script type="text/javascript" src="PhoneList.js"></script -->
<!-- contents of external file (if desired) -->
<script type="text/javascript">
var PhoneList = [
// Name | Phone | Room | Email
"Betty Boop|123-456-7890|A11|bboop",
"Charlie Brown|246-135-7890|D45|cbrown",
"Clarabel Cow|234-567-8901|B22|ccow",
"Deputy Dog|345-678-9012|C33|ddog",
"Snoopy Dog|468-123-5790|E56|sdog",
"Elmer Fudd|456-789-0123|D44|efudd",
"Frank Farkle|567-890-1234|E55|frankie",
"Goofy|678-901-2345|A66|goof",
"Hilda Witch|789-012-3456|B77|hilda",
"Igor Ignoramous|890-123-4567|C88|igor",
"Katzinjammer Kids|901-234-5678|D99|kkids",
"Clark Kent|135-246-7890|C34|super",
"Lois Lane|012-345-6789|E00|llane",
"Mighty Mouse|111-222-3333|A12|might",
"O'Henry|222-333-4444|B23|ohenry" // NOTE: no comma after last entry
];
</script>

<SCRIPT type="text/javascript">

var currentNames = [];

function ChooseName(info) {
currentNames = [];
info = info.toUpperCase();
if (info == '') { document.getElementById('Listings').innerHTML = ''; return; }
for (var i=0; i<PhoneList.length; i++) {
if (PhoneList[i].toUpperCase().indexOf(info) != -1)
{ currentNames.push(PhoneList[i]); }
}

/* display method #1: just a display
document.getElementById('Listings').innerHTML = currentNames.join('<br>');
*/

/* display method #2: alternating colored rows */
var fldSize = [25,15,5,10];
var str = '';
var tmp = '<div class="evenRow">'+'Name'.padR('&nbsp',25)+'|';
tmp += 'Phone'.padR('&nbsp',15)+'|';
tmp += 'Room'.padR('&nbsp',5)+'|';
tmp += 'Email'.padR('&nbsp',10)+'|';
str += tmp+'</div>';

var tmparr = [];
for (var i=0; i<currentNames.length; i++) {
tmparr = currentNames[i].split('|');
tmp = '';
for (var j=0; j<tmparr.length; j++) { tmp += tmparr[j].padR('&nbsp;',fldSize[j])+'|'; }
if (i % 2 == 0) { str += '<div class="oddRow">'+tmp+'</div>'; }
else { str += '<div class="evenRow">'+tmp+'</div>'; }
}
/* */

/* display method #3: table format
var str = '';
var tmp = [];
str += '<table border="1" width="100%">';
for (var i=0; i<currentNames.length; i++) {
tmp = currentNames[i].split('|');
str += '<tr>';
str += '<td>'+tmp[0]+'</td>';
str += '<td>'+tmp[1]+'</td>';
str += '<td>'+tmp[2]+'</td>';
str += '<td>'+tmp[3]+'@someplace.xyz</td>';
str += '</tr>';
}
/* */

document.getElementById('Listings').innerHTML = str;
}
// padR()
String.prototype.padR = function (c, n) {
var t = "";
for (var i = this.length; i < n; i++) {
t += c;
} return this + t;
}
</SCRIPT>
</head>
<BODY>
Search for:
<input type="text" id="entry" value="" style="font-family:monospace"
onKeyUp="ChooseName(this.value)">
<div id="Listings"
style="height:100px;width:50%;overflow:auto;font-family:monospace;font-size:0.8em">
<!-- remove height:100px above if no scroll display is desired -->
</div>

</BODY>
</html>

Current set-up for method #2 display ...
Can do slight modifications to act like <select> element.