Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

drop down list 2

Status
Not open for further replies.

nevergiveup01

Programmer
Nov 18, 2008
18
0
0
US
How do you create a drop down list in ASP.net 2.0 that allows the user to start typing in a last name and find their name from a table and then select their name and have their information (such as customerID)populate a datagrid that will update another table? I prefer VB over C# becuase I do not know C#..

Thanks!!!

Example: "if you are an existing customer please type your name in the box and once you find your name, select it"

 
It doesn't matter if you are using VB or C#, this is something that will have to be done via javascript/AJAX.
 
Hi,
Here is a JavaScript set of functions that will do that:
Code:
[COLOR=green]
<SCRIPT Language="JavaScript">
//***********************************************************************
//
//    JavaScript to allow self refreshing type-down through long LOVs
//
//************************************************************************

// Auto-select listbox

// mike pope, Visual Basic UE

// 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 = 10 ;     // 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
//****************************************************************************
//
//  END OF  CODE
//
//*****************************************************************************
</SCRIPT>

[/color]

In your .NET control that creates the list add the attribute:
Code:
OnKeyPress="listbox_onkeypress()"





[profile]

To Paraphrase:"The Help you get is proportional to the Help you give.."
 
Thanks, my email notification is not set up correctly and I did not know I had a reply.. Let me try this.. Thanks!
 
I read the code and I think I understand but if you could hold my hand just a bit more.. Actually a lot more.. What do I name my list box so the code you gave me will refer to it? How do I get the data from the list box ( lets say the PK) so it will show the person all of their info? For example; The customer finds their last name and then their address shows in a grid below.. Then they can choose their info from the grid below and it carries their customer ID over to a form.. Lets call the the form "service quote" then when they get finished with their service quote they click"enter quote" and the quote (with their customer id) "inserts into" the database table...I'm so new to ASP.net I need a lot of help..thanks if you can or will:)
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top