is possible to implement an incremental search over the table using a forms with textbox field and the event "onkeyup" ?
Any help will be appreciate
Thanks
Technically this should be possible - I just having a trouble deciding what is the best UI solution for this feature. Should it have textbox(es) on top (below) column header? or something else? I would appreciate if someone can post a link to the existing (not necessary HTML) widget which does this right from the usability point of view.
OK!
I'm sending you a very simple javascript implementing incremental search function. These function use a list box with an array, but the information is very poor.
It's interesting to make the search over the first sorted column. The final user always could see all the rest of the information.
Any idea how to implementing something like these?
Thanks in advance
<!-- THREE STEPS TO INSTALL LIST CHOOSER:
1. Copy the coding into the HEAD of your HTML document
2. Add the onLoad event handler into the BODY tag
3. Put the last coding into the BODY of your HTML document -->
<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Anand Raman (anand_raman@poboxes.com) -->
<!-- Web Site:
http://www.angelfire.com/ar/diduknow -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!!
http://javascript.internet.com -->
<!-- Begin
function SelObj(formname,selname,textname,str) {
this.formname = formname;
this.selname = selname;
this.textname = textname;
this.select_str = str || '';
this.selectArr = new Array();
this.initialize = initialize;
this.bldInitial = bldInitial;
this.bldUpdate = bldUpdate;
}
function initialize() {
if (this.select_str =='') {
for(var i=0;i<document.forms[this.formname][this.selname].options.length;i++) {
this.selectArr[i] = document.forms[this.formname][this.selname].options[i];
this.select_str += document.forms[this.formname][this.selname].options[i].value+":"+
document.forms[this.formname][this.selname].options[i].text+",";
}
}
else {
var tempArr = this.select_str.split(',');
for(var i=0;i<tempArr.length;i++) {
var prop = tempArr[i].split(':');
this.selectArr[i] = new Option(prop[1],prop[0]);
}
}
return;
}
function bldInitial() {
this.initialize();
for(var i=0;i<this.selectArr.length;i++)
document.forms[this.formname][this.selname].options[i] = this.selectArr[i];
document.forms[this.formname][this.selname].options.length = this.selectArr.length;
return;
}
function bldUpdate() {
var str = document.forms[this.formname][this.textname].value.replace('^\s*','');
if(str == '') {this.bldInitial();return;}
this.initialize();
var j = 0;
pattern1 = new RegExp("^"+str,"i");
for(var i=0;i<this.selectArr.length;i++)
if(pattern1.test(this.selectArr[i].text))
document.forms[this.formname][this.selname].options[j++] = this.selectArr[i];
document.forms[this.formname][this.selname].options.length = j;
if(j==1){
document.forms[this.formname][this.selname].options[0].selected = true;
//document.forms[this.formname][this.textname].value = document.forms[this.formname][this.selname].options[0].text;
}
}
function setUp() {
obj1 = new SelObj('menuform','itemlist','entry');
// menuform is the name of the form you use
// itemlist is the name of the select pulldown menu you use
// entry is the name of text box you use for typing in
obj1.bldInitial();
}
// End -->
</script>
</HEAD>
<!-- STEP TWO: Insert the onLoad event handler into your BODY tag -->
<BODY OnLoad="javascript:setUp()">
<!-- STEP THREE: Copy this code into the BODY of your HTML document -->
<center>
<form name="menuform" onSubmit="javascript:window.location = document.menuform.itemlist.options[document.menuform.itemlist.selectedIndex].value;return false;">
<font face="arial, helvetica" size="-1">Please enter the first few letters of the item you are looking for.</font>
<br><br>
<input type="text" name="entry" size="30" onKeyUp="javascript:obj1.bldUpdate();">
<br>
<select name="itemlist" size=5>
<option value="page.html">ALL
<option value="page.html">ALL CATALOG
<option value="page.html">ALL CLUSTERS
<option value="page.html">ALL CLUSTERS HASH EXPRESSIONS
<option value="page.html">ALL COL COMMENTS
<option value="page.html">ALL COL PRIVS
<option value="page.html">ALL COL PRIVS MADE
<option value="page.html">ALL COL PRIVS SENT
<option value="page.html">ALL CONSTRAINTS
<option value="page.html">ALL CONS COLUMNS
<option value="page.html">ALL DB LINKS
<option value="page.html">ALL DEF AUDIT
<option value="page.html">ALL DEPENDENCIES
<option value="page.html">ALL ERRORS
<option value="page.html">ALL HISTOGRAMS
<option value="page.html">ALL INDEXES
<option value="page.html">ALL IND COLUMNS
<option value="page.html">ALL JOBS
<option value="page.html">ALL OBJECTS
<option value="page.html">ALL REFRESH
<option value="page.html">ALL REFRESH NOW
<option value="page.html">ALL USERS
<option value="page.html">ALL VIEWS
<option value="page.html">AUDIT ACTIONS
<option value="page.html">BOOKS
<option value="page.html">CLIENTS
<option value="page.html">CLOSED
<option value="page.html">COLUMN PRIVILEGES
<option value="page.html">DBA ANALYZE COST
<option value="page.html">DBA FROM CLIENTS
<option value="page.html">DBA FROM NEIGHBORS
<option value="page.html">DBA PROFILES
<option value="page.html">DBA REFRESH ALL
<option value="page.html">DBA REFRESH PAGE
<option value="page.html">DBA REPORT
<option value="page.html">DBA RGROUP
<option value="page.html">DBA ROLE
<option value="page.html">DBA ROLE SUMMARY
<option value="page.html">DBA ROLLBACK SEGS
</select>
</form>
</center>
<p><center>
<font face="arial, helvetica" size="-2">Free JavaScripts provided<br>
by <a href="
http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>
<!-- Script Size: 4.83 KB -->
That code is sloooow! Try it on a list of, say, 2000, wait 15 to 30 seconds to start up, 5 to 15 seconds to respond to the first letter typed.
The code below is as fast as greased lightning. It also show the user no entries until he's typed the first letter -- which is preferred, in my application, since if he's asked for nothing, that's what he gets.
It also opens another window when the user clicks on one of the entries. In this example, that other window is just a constant dummy; in the actual application, the value associated with the selected entry is being used as the final characters of the URI.
This is optimized for an ordered list. If your list is not ordered, just remove the two lines indicated.
BTW: This is the first Javascript code I've ever written; in first, the first code in any object-based language.
------------------
<SCRIPT LANGUAGE="JavaScript">
function localopen(theValue) {
window_handle = window.open('DummyProduct.html',theValue,"width=400,height=300,scrollbars=yes");
}
function bldInitial() {
document.forms[this.formname][this.selname].options.length = 0
document.forms[this.formname][this.textname].focus()
}
function bldUpdate() {
var str = document.forms[this.formname][this.textname].value.replace(/^\s*/,'');
if(str == '') {
this.bldInitial()
}
else {
var j = 0;
pattern1 = new RegExp("^"+str,"i");
for(var i=0;i<this.optionSet.length;i++) {
if(pattern1.test(this.optionSet[i].text)) {
document.forms[this.formname][this.selname].options[j++] = new Option(this.optionSet[i].text, this.optionSet[i].value); }
// remove the following two lines if the list is not ordered by its text
else {if(j>0) {
break; }
}
}
document.forms[this.formname][this.selname].options.length=j;
}
}
function setUp() {
// menuform is the name of the form you use
// itemlist is the name of the select pulldown menu you use
// entry is the name of text box you use for typing in
this.formname = 'menuform';
this.selname = 'itemlist';
this.textname = 'entry';
this.bldInitial();
}
// the possible entries are to be included here, not in the select
var optionSet = [
{text: 'Abanyypk', value: '12'},
{text: 'Acaezvre', value: '28'},
{text: 'Accfmqmx', value: '2631'},
{text: 'Accgumfp', value: '4217'},
{text: 'Accjsjdn', value: '4217'},
{text: 'Acclubjy', value: '37'},
{text: 'Accubbun', value: '5204'},
{text: 'Aceacyeo', value: '46'},
{text: 'Acebwrlp', value: '55'},
. . .
. . .
{text: 'Zyrooumy', value: '842'}
];
// End -->
</script>
<title>Dummy page</title>
</head>
<body bgcolor="#FFFFFF" text="800080" link="#0000FF" vlink="#0000CC" Alink="#000099" OnLoad="javascript:setUp()">
<basefont face="times" size=3>
<center>
<form name="menuform" action="
http:\\www.google.com">
<font face="arial, helvetica" size="-1">Please enter the first few letters of the item you are looking for.</font>
<br><br>
<input type="text" name="entry" size="30" style="font-weight: bold" onKeyUp="javascript:bldUpdate();">
<br>
<select name="itemlist"
size=10
style="font-weight: bold; color: purple; width: 200px"
onclick=localopen(itemlist.value)>
<option>
</select>
</form>
</center>
This is good stuff! Is there any way to get the code to look across multiple pages? I have a separate page for each letter of the alphabet, mostly to keep the scrollable list as short as possible. I have an HTML address bar but was hoping to be able to use the incremental search function. Any ideas?
I personally would recommend the iTunes interface. A single textbox searches all the columns of the grid and hides the rows which don't contain the filter.
Fairly simple to implement and, based on my experience, users like it.