[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 389
  • Last Modified:

autofill textbox with data from database in asp

Could you please post some code on how to autofill textbox with data from database in asp?
Let's say a user types in O, then the page must autofill the textbox with a column value in the database, say Oranges?

Thanks.
0
balabommala
Asked:
balabommala
  • 4
  • 3
  • 2
1 Solution
 
sybeCommented:
Check out http://atlas.asp.net

It's not that easy but Atlas should provide with a helpful library.
0
 
balabommalaAuthor Commented:
I need code in asp not in .net
Could someone help me with this?

Increasing points because of urgency.

Thanks.
0
 
peterxlaneCommented:
sybe's solution is a .Net AJAX solution (I think).  You should also be able to find an ASP based solution if you do a search for AJAX + autocomplete.  This is one of the most common AJAX examples.  Additionally, I found this code that I found a while back (I am not sure who wrote it).  It is a JavaScript solution and does not pull values from a database as is, but it would be pretty easy to just create a recordset and use that to create the Javascript array and you would be done.


<html>
<head>
 <title>Autocomplete Textbox Example</title>
       <script type="text/javascript">
var isOpera = navigator.userAgent.indexOf("Opera") > -1;
var isIE = navigator.userAgent.indexOf("MSIE") > 1 && !isOpera;
var isMoz = navigator.userAgent.indexOf("Mozilla/5.") == 0 && !isOpera;

function textboxSelect (oTextbox, iStart, iEnd) {

   switch(arguments.length) {
       case 1:
           oTextbox.select();
           break;

       case 2:
           iEnd = oTextbox.value.length;
           /* falls through */
           
       case 3:          
           if (isIE) {
               var oRange = oTextbox.createTextRange();
               oRange.moveStart("character", iStart);
               oRange.moveEnd("character", -oTextbox.value.length + iEnd);      
               oRange.select();                                              
           } else if (isMoz){
               oTextbox.setSelectionRange(iStart, iEnd);
           }                    
   }

   oTextbox.focus();
}

function textboxReplaceSelect (oTextbox, sText) {

   if (isIE) {
       var oRange = document.selection.createRange();
       oRange.text = sText;
       oRange.collapse(true);
       oRange.select();                                
   } else if (isMoz) {
       var iStart = oTextbox.selectionStart;
       oTextbox.value = oTextbox.value.substring(0, iStart) + sText + oTextbox.value.substring(oTextbox.selectionEnd, oTextbox.value.length);
       oTextbox.setSelectionRange(iStart + sText.length, iStart + sText.length);
   }

   oTextbox.focus();
}

function autocompleteMatch (sText, arrValues) {

   for (var i=0; i < arrValues.length; i++) {
       if (arrValues[i].indexOf(sText) == 0) {
           return arrValues[i];
       }
   }

   return null;

}

function autocomplete(oTextbox, oEvent, arrValues) {

   switch (oEvent.keyCode) {
       case 38: //up arrow  
       case 40: //down arrow
       case 37: //left arrow
       case 39: //right arrow
       case 33: //page up  
       case 34: //page down  
       case 36: //home  
       case 35: //end                  
       case 13: //enter  
       case 9: //tab  
       case 27: //esc  
       case 16: //shift  
       case 17: //ctrl  
       case 18: //alt  
       case 20: //caps lock
       case 8: //backspace  
       case 46: //delete
           return true;
           break;

       default:
           textboxReplaceSelect(oTextbox, String.fromCharCode(isIE ? oEvent.keyCode : oEvent.charCode));
           var iLen = oTextbox.value.length;

           var sMatch = autocompleteMatch(oTextbox.value, arrValues);

           if (sMatch != null) {
               oTextbox.value = sMatch;
               textboxSelect(oTextbox, iLen, oTextbox.value.length);
           }  
           
           return false;
   }
}
       </script>
       <script>
               var arrValues = ["red", "orange", "yellow", "green", "blue", "indigo", "violet", "brown", "reddish brown"];
       </script>
</head>
<body>
<h2>Autocomplete Textbox Example</h2>
<p>Type in a color in lowercase:<br />
<input type="text" value="" id="txt1" onkeypress="return autocomplete(this, event, arrValues)" /></p>
</body>
</html>
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
sybeCommented:
Atlas is not necessarily .Net. You can use the js-libraries on any platform. You don't even have to use Visual Studio to use the Atlas libraries.

It's not easy giving you some code. You can look for some code samples on internet. But it is really is a matter of combining a number of techniques which you probably already know. And you will have to writye the code yourself, or at least customize it to your own needs. Atlas provides you with a large number of functions to make your task easier.

Oh, and the code will not be just asp. It will be javascript and probably xml. And you need to have some understanding of the DOM.
0
 
balabommalaAuthor Commented:
Infact I have this script to populate from an array:
<script>
sections = new Array('apple','pear','orange','mango','durain','grapes','starfruit');
names = new Array('tom','dick','harry','john','petter','foo','bar');
function autocomplete(n,ac_array){
    if (n.value == "") return 0;
    if (event.keyCode == 8 && n.backspace){
        n.value = n.value.substr(0,n.value.length-1);
        n.backspace = false;
    }

    var r = n.createTextRange();    
    tmp= n.value;
    if (tmp == "")return 0;
    for (z=0;z<ac_array.length;z++){
        tmp2 = ac_array[z];
        count = 0;
        for (i = 0;i<tmp.length;i++){
            if (tmp2.charAt(i) == tmp.charAt(i)){
                count++
            }
        }
        if (count == tmp.length){
            diff = tmp2.length - tmp.length;
            if (diff <= 0) break;
            kap = "";
            for (i=0;i<tmp2.length;i++){
                if (i >= tmp.length) kap += tmp2.charAt(i);
            }
            n.backspace = true;
            r.text += kap;
            r.findText(kap,diff*-2);
            r.select();
            return 0;
        }
    }
    n.backspace = false;
    return 0;
}
</script>
But I have no idea how to populate array from a database.

Please help.

Thanks.
0
 
peterxlaneCommented:
That's interesting.  I actually thought that it was a server based technology that wrote the client side JavaScript for you.  I see now that it does actually include a bunch of pre-written JavaScript as well.  Looks interesting...

The JavaScript library that I have used is located at:  http://www.ajaxtoolbox.com/

It has some great examples and is really easy to use.

0
 
peterxlaneCommented:
something like this woudl create an array in JavaScript:

<script language="JavaScript">
var arrValues = new Array()
//var arrValues = ["red", "orange", "yellow", "green", "blue", "indigo", "violet", "brown", "reddish brown"];
         
<%          
connStr = "Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" & Server.MapPath("Northwind.mdb")
Set oConn = Server.CreateObject("ADODB.Connection")
Set oRecordset = Server.CreateObject("ADODB.Recordset")
oConn.Open(connStr)
MySQL = "SELECT TOP 3 ProductName FROM products"
oRecordset.Open MySQL, oConn
iCount = 0
Do While Not oRecordset.EOF
%>
  arrValues[<%=iCount%>] = "<%=oRecordset("ProductName")%>";
<%
      iCount = iCount + 1
    oRecordset.MoveNext
Loop

oRecordset.Close
oConn.Close
%>  
</script>
0
 
balabommalaAuthor Commented:
Thanks peterxlane.
You are awesome!
0
 
peterxlaneCommented:
Glad I could help.  I would definitely recommend looking into some of the AJAX solutions for this type of thing...
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 4
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now