473,287 Members | 1,574 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,287 software developers and data experts.

Dropdown on Textbox using ASP

A P
Hi!

I have seen some techniques like this on the web. Currently, I'm using Combo
box which values came from database table. One disadvantage is when the
combo box have lots of values, users are complaining since you cannot use
keyboard to search the value that is needed. Hope you might help me.

regards,

Me
Jul 22 '05 #1
6 2686
You'll have to build your own control for that, or I would recommend a
simple SEARCH form to return the result they want

--
Curt Christianson
Site & Scripts: http://www.Darkfalz.com
Blog: http://blog.Darkfalz.com
"A P" <ap@textguru.ph> wrote in message
news:%2****************@TK2MSFTNGP15.phx.gbl...
Hi!

I have seen some techniques like this on the web. Currently, I'm using
Combo
box which values came from database table. One disadvantage is when the
combo box have lots of values, users are complaining since you cannot use
keyboard to search the value that is needed. Hope you might help me.

regards,

Me

Jul 22 '05 #2
CJM

"A P" <ap@textguru.ph> wrote in message
news:%2****************@TK2MSFTNGP15.phx.gbl...
Hi!

I have seen some techniques like this on the web. Currently, I'm using
Combo
box which values came from database table. One disadvantage is when the
combo box have lots of values, users are complaining since you cannot use
keyboard to search the value that is needed. Hope you might help me.

regards,

Me


Use a <Select> tag as normal, but add a couple of event handlers in as
follows:

<select name="field1" onkeypress="listbox_onkeypress();"
onblur="listbox_onblur();">
<option>1</option>
...
<option>n</option>
</select>

Then bang the following script in to a .js file and link it in... and hey
presto... you have autocomplete functionality.

// Auto-select listbox

// This script and the listbox on this page illustrates one
// way to create an "auto-complete" listbox, where the

var toFind = ""; // Variable that acts as keyboard buffer
var timeoutID = ""; // Process id for timer (used when stopping
// the timeout)
timeoutInterval = 250; // Milliseconds. Shorten to cause keyboard
// buffer to be cleared faster
var timeoutCtr = 0; // Initialization of timer count down
var timeoutCtrLimit = 3 ; // Number of times to allow timer to count
// down
var oControl = ""; // Maintains a global reference to the
// control that the user is working with.

function listbox_onkeypress(){

// This function is called when the user presses a key while focus is in
// the listbox. It maintains the keyboard buffer.
// Each time the user presses a key, the timer is restarted.
// First, stop the previous timer; this function will restart it.
window.clearInterval(timeoutID)

// Which control raised the event? We'll need to know which control to
// set the selection in.
oControl = window.event.srcElement;

var keycode = window.event.keyCode;
if(keycode >= 32 ){
// What character did the user type?
var c = String.fromCharCode(keycode);
c = c.toUpperCase();
// Convert it to uppercase so that comparisons don't fail
toFind += c ; // Add to the keyboard buffer
find(); // Search the listbox
timeoutID = window.setInterval("idle()", timeoutInterval);
// Restart the timer
}
}

function listbox_onblur(){
// This function is called when the user leaves the listbox.

window.clearInterval(timeoutID);
resetToFind();
}

function idle(){
// This function is called if the timeout expires. If this is the
// third (by default) time that the idle function has been called,
// it stops the timer and clears the keyboard buffer

timeoutCtr += 1
if(timeoutCtr > timeoutCtrLimit){
resetToFind();
timeoutCtr = 0;
window.clearInterval(timeoutID);
}
}

function resetToFind(){
toFind = ""
}
function find(){
// Walk through the select list looking for a match

var allOptions = document.all.item(oControl.id);

for (i=0; i < allOptions.length; i++){
// Gets the next item from the listbox
nextOptionText = allOptions(i).text.toUpperCase();

// By default, the values in the listbox and as entered by the
// user are strings. This causes a string comparison to be made,
// which is not correct for numbers (1 < 11 < 2).
// The following lines coerce numbers into an (internal) number
// format so that the subsequent comparison is done as a
// number (1 < 2 < 11).

if(!isNaN(nextOptionText) && !isNaN(toFind) ){
nextOptionText *= 1; // coerce into number
toFind *= 1;
}

// Does the next item match exactly what the user typed?
if(toFind == nextOptionText){
// OK, we can stop at this option. Set focus here
oControl.selectedIndex = i;
window.event.returnValue = false;
break;
}

// If the string does not match exactly, find which two entries
// it should be between.
if(i < allOptions.length-1){

// If we are not yet at the last listbox item, see if the
// search string comes between the current entry and the next
// one. If so, place the selection there.

lookAheadOptionText = allOptions(i+1).text.toUpperCase() ;
if( (toFind > nextOptionText) &&
(toFind < lookAheadOptionText) ){
oControl.selectedIndex = i+1;
window.event.cancelBubble = true;
window.event.returnValue = false;
break;
} // if
} // if

else{

// If we are at the end of the entries and the search string
// is still higher than the entries, select the last entry

if(toFind > nextOptionText){
oControl.selectedIndex = allOptions.length-1 // stick it
// at the end
window.event.cancelBubble = true;
window.event.returnValue = false;
break;
} // if
} // else
} // for
} // function
Hope this helps...

Chris
Jul 22 '05 #3
Looks nice CJM.
I had written something quick for a couple of my Combos but I'll take a
close look at your functions and may just integrate it in my pages.
Of course I'll give you full credit but no paycheck. :-)
Thanks for the code.

"CJM" <cj*******@newsgroup.nospam> wrote in message
news:OB**************@TK2MSFTNGP10.phx.gbl...

"A P" <ap@textguru.ph> wrote in message
news:%2****************@TK2MSFTNGP15.phx.gbl...
Hi!

I have seen some techniques like this on the web. Currently, I'm using
Combo
box which values came from database table. One disadvantage is when the
combo box have lots of values, users are complaining since you cannot use
keyboard to search the value that is needed. Hope you might help me.

regards,

Me


Use a <Select> tag as normal, but add a couple of event handlers in as
follows:

<select name="field1" onkeypress="listbox_onkeypress();"
onblur="listbox_onblur();">
<option>1</option>
...
<option>n</option>
</select>

Then bang the following script in to a .js file and link it in... and hey
presto... you have autocomplete functionality.

// Auto-select listbox

// This script and the listbox on this page illustrates one
// way to create an "auto-complete" listbox, where the

var toFind = ""; // Variable that acts as keyboard buffer
var timeoutID = ""; // Process id for timer (used when stopping
// the timeout)
timeoutInterval = 250; // Milliseconds. Shorten to cause keyboard
// buffer to be cleared faster
var timeoutCtr = 0; // Initialization of timer count down
var timeoutCtrLimit = 3 ; // Number of times to allow timer to count
// down
var oControl = ""; // Maintains a global reference to the
// control that the user is working with.

function listbox_onkeypress(){

// This function is called when the user presses a key while focus is in
// the listbox. It maintains the keyboard buffer.
// Each time the user presses a key, the timer is restarted.
// First, stop the previous timer; this function will restart it.
window.clearInterval(timeoutID)

// Which control raised the event? We'll need to know which control to
// set the selection in.
oControl = window.event.srcElement;

var keycode = window.event.keyCode;
if(keycode >= 32 ){
// What character did the user type?
var c = String.fromCharCode(keycode);
c = c.toUpperCase();
// Convert it to uppercase so that comparisons don't fail
toFind += c ; // Add to the keyboard buffer
find(); // Search the listbox
timeoutID = window.setInterval("idle()", timeoutInterval);
// Restart the timer
}
}

function listbox_onblur(){
// This function is called when the user leaves the listbox.

window.clearInterval(timeoutID);
resetToFind();
}

function idle(){
// This function is called if the timeout expires. If this is the
// third (by default) time that the idle function has been called,
// it stops the timer and clears the keyboard buffer

timeoutCtr += 1
if(timeoutCtr > timeoutCtrLimit){
resetToFind();
timeoutCtr = 0;
window.clearInterval(timeoutID);
}
}

function resetToFind(){
toFind = ""
}
function find(){
// Walk through the select list looking for a match

var allOptions = document.all.item(oControl.id);

for (i=0; i < allOptions.length; i++){
// Gets the next item from the listbox
nextOptionText = allOptions(i).text.toUpperCase();

// By default, the values in the listbox and as entered by the
// user are strings. This causes a string comparison to be made,
// which is not correct for numbers (1 < 11 < 2).
// The following lines coerce numbers into an (internal) number
// format so that the subsequent comparison is done as a
// number (1 < 2 < 11).

if(!isNaN(nextOptionText) && !isNaN(toFind) ){
nextOptionText *= 1; // coerce into number
toFind *= 1;
}

// Does the next item match exactly what the user typed?
if(toFind == nextOptionText){
// OK, we can stop at this option. Set focus here
oControl.selectedIndex = i;
window.event.returnValue = false;
break;
}

// If the string does not match exactly, find which two entries
// it should be between.
if(i < allOptions.length-1){

// If we are not yet at the last listbox item, see if the
// search string comes between the current entry and the next
// one. If so, place the selection there.

lookAheadOptionText = allOptions(i+1).text.toUpperCase() ;
if( (toFind > nextOptionText) &&
(toFind < lookAheadOptionText) ){
oControl.selectedIndex = i+1;
window.event.cancelBubble = true;
window.event.returnValue = false;
break;
} // if
} // if

else{

// If we are at the end of the entries and the search string
// is still higher than the entries, select the last entry

if(toFind > nextOptionText){
oControl.selectedIndex = allOptions.length-1 // stick it
// at the end
window.event.cancelBubble = true;
window.event.returnValue = false;
break;
} // if
} // else
} // for
} // function
Hope this helps...

Chris

Jul 22 '05 #4
CJM

"Raymond D'Anjou" <rd*****@savantsoftNOSPAM.net> wrote in message
news:%2***************@TK2MSFTNGP14.phx.gbl...
Looks nice CJM.
I had written something quick for a couple of my Combos but I'll take a
close look at your functions and may just integrate it in my pages.
Of course I'll give you full credit but no paycheck. :-)
Thanks for the code.


I'm afraid that I can't take the credit... it's a modified version of some
code found on the web, probably modified by a guy who also found it on the
web etc...

You'll probably find that Charles Babbage or Alan Turing wrote the first
version...!
Jul 22 '05 #5
A P
Hi CJM,

I have tried your code as is, I've just add values on the combo box. I
receive error message "Object Required" on the browser. Where does it
pertains to? I have paste the comple file:

<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>DropDown Link</title>
<script src="/js/autocomplete.js"></script>
</head>

<body>
<p>
<form method="GET" name="frmlink">
<select size="1" name="selectlink" onkeypress="listbox_onkeypress();"
onblur="listbox_onblur();">
<option>Select a Program</option>
<option value='/c.asp'>Components</option>
<option value='/me>ME</option>
</select>
</form>

</body>

</html>

Hope youmight help me.

Me

"CJM" <cj*******@newsgroup.nospam> wrote in message
news:OB**************@TK2MSFTNGP10.phx.gbl...

"A P" <ap@textguru.ph> wrote in message
news:%2****************@TK2MSFTNGP15.phx.gbl...
Hi!

I have seen some techniques like this on the web. Currently, I'm using
Combo
box which values came from database table. One disadvantage is when the
combo box have lots of values, users are complaining since you cannot use keyboard to search the value that is needed. Hope you might help me.

regards,

Me
Use a <Select> tag as normal, but add a couple of event handlers in as
follows:

<select name="field1" onkeypress="listbox_onkeypress();"
onblur="listbox_onblur();">
<option>1</option>
...
<option>n</option>
</select>

Then bang the following script in to a .js file and link it in... and hey
presto... you have autocomplete functionality.

// Auto-select listbox

// This script and the listbox on this page illustrates one
// way to create an "auto-complete" listbox, where the

var toFind = ""; // Variable that acts as keyboard buffer
var timeoutID = ""; // Process id for timer (used when stopping
// the timeout)
timeoutInterval = 250; // Milliseconds. Shorten to cause keyboard
// buffer to be cleared faster
var timeoutCtr = 0; // Initialization of timer count down
var timeoutCtrLimit = 3 ; // Number of times to allow timer to count
// down
var oControl = ""; // Maintains a global reference to the
// control that the user is working with.

function listbox_onkeypress(){

// This function is called when the user presses a key while focus is

in // the listbox. It maintains the keyboard buffer.
// Each time the user presses a key, the timer is restarted.
// First, stop the previous timer; this function will restart it.
window.clearInterval(timeoutID)

// Which control raised the event? We'll need to know which control to
// set the selection in.
oControl = window.event.srcElement;

var keycode = window.event.keyCode;
if(keycode >= 32 ){
// What character did the user type?
var c = String.fromCharCode(keycode);
c = c.toUpperCase();
// Convert it to uppercase so that comparisons don't fail
toFind += c ; // Add to the keyboard buffer
find(); // Search the listbox
timeoutID = window.setInterval("idle()", timeoutInterval);
// Restart the timer
}
}

function listbox_onblur(){
// This function is called when the user leaves the listbox.

window.clearInterval(timeoutID);
resetToFind();
}

function idle(){
// This function is called if the timeout expires. If this is the
// third (by default) time that the idle function has been called,
// it stops the timer and clears the keyboard buffer

timeoutCtr += 1
if(timeoutCtr > timeoutCtrLimit){
resetToFind();
timeoutCtr = 0;
window.clearInterval(timeoutID);
}
}

function resetToFind(){
toFind = ""
}
function find(){
// Walk through the select list looking for a match

var allOptions = document.all.item(oControl.id);

for (i=0; i < allOptions.length; i++){
// Gets the next item from the listbox
nextOptionText = allOptions(i).text.toUpperCase();

// By default, the values in the listbox and as entered by the
// user are strings. This causes a string comparison to be made,
// which is not correct for numbers (1 < 11 < 2).
// The following lines coerce numbers into an (internal) number
// format so that the subsequent comparison is done as a
// number (1 < 2 < 11).

if(!isNaN(nextOptionText) && !isNaN(toFind) ){
nextOptionText *= 1; // coerce into number
toFind *= 1;
}

// Does the next item match exactly what the user typed?
if(toFind == nextOptionText){
// OK, we can stop at this option. Set focus here
oControl.selectedIndex = i;
window.event.returnValue = false;
break;
}

// If the string does not match exactly, find which two entries
// it should be between.
if(i < allOptions.length-1){

// If we are not yet at the last listbox item, see if the
// search string comes between the current entry and the next
// one. If so, place the selection there.

lookAheadOptionText = allOptions(i+1).text.toUpperCase() ;
if( (toFind > nextOptionText) &&
(toFind < lookAheadOptionText) ){
oControl.selectedIndex = i+1;
window.event.cancelBubble = true;
window.event.returnValue = false;
break;
} // if
} // if

else{

// If we are at the end of the entries and the search string
// is still higher than the entries, select the last entry

if(toFind > nextOptionText){
oControl.selectedIndex = allOptions.length-1 // stick it
// at the end
window.event.cancelBubble = true;
window.event.returnValue = false;
break;
} // if
} // else
} // for
} // function
Hope this helps...

Chris

Jul 22 '05 #6
CJM

"A P" <ap@textguru.ph> wrote in message
news:Or**************@tk2msftngp13.phx.gbl...
Hi CJM,

I have tried your code as is, I've just add values on the combo box. I
receive error message "Object Required" on the browser. Where does it
pertains to? I have paste the comple file:

<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>DropDown Link</title>
<script src="/js/autocomplete.js"></script>
</head>

<body>
<p>
<form method="GET" name="frmlink">
<select size="1" name="selectlink" onkeypress="listbox_onkeypress();"
onblur="listbox_onblur();">
<option>Select a Program</option>
<option value='/c.asp'>Components</option>
<option value='/me>ME</option>
</select>
</form>

</body>

</html>

Hope youmight help me.

Me


I'm not great at debugging Javascript, but what that error message probably
means is that when your event handler calls a routine, it cant find it.

It could be that the functions are are called something slightly different,
or more likely that it can't find your JS file (so check the path).

One thing you might want to try is include the Javascript in your main file
(as opposed to an extrernal JS file).

Chris
Jul 22 '05 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

24
by: London | last post by:
Hello Can you help me. By ASP How can I get the dropdown(control'name)'s selected value? What is it's property'name?
20
by: Dannyboyo | last post by:
I have what I hope is a simple request. I can't really code in javascript, but I am pretty good at cusomizing it with slight modifications. I code in ASP and HTML. I am trying to capture customer...
0
by: Mark | last post by:
Hi, I have a datalist that contains a textbox as well as a dropdown list. For each single row in the datalist the associated dropdown list can have at least one value What I would like to be...
5
by: Gil | last post by:
Is there a way to tell if a combbox is in dropdown mode. I tried and if statement combobox.dropdown = true but i get an error. dropwndown function doesnt store if its true or false what i am...
2
by: Mike Collins | last post by:
I cannot get the correct drop down list value from a drop down I have on my web form. I get the initial value that was loaded in the list. It was asked by someone else what the autopostback was...
2
by: Peter | last post by:
ASP.NET 2003 In the DataGrid how do I select current cell value in the dropdown box when I click on the edit link, currently when I click on the edit link in the DataGrid the dropdown box...
0
by: anjupt | last post by:
Hi, I can add values to a dropdown from 1 to 100 using a while loop in page load.ie Dim i = 1 While i <= 100 Me.DropDownList2.Items.Add(i) ' i = i +...
0
by: staeri | last post by:
I want to replace a textbox with a dropdown in my FormView but I'm unsure of how to change the update parameters so that the value in the dropdown is saved. Right now I'm using:...
11
by: eureka | last post by:
Hi All, I'm training in Servlets, JSP and JavaScript, I have a web page in which there's a "StudentName" textbox and below it is a "Names" Dropdown list. Initially the Textbox is empty and...
1
by: Simone | last post by:
Hello, I am new to asp.net and I am in need of help. I have a dropdown that is attached to a SqlDataSource (DataSourceID). The dropdown has one column shown as text and another hidden as the...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: marcoviolo | last post by:
Dear all, I would like to implement on my worksheet an vlookup dynamic , that consider a change of pivot excel via win32com, from an external excel (without open it) and save the new file into a...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.