asked on

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.

sybe

Check out http://atlas.asp.net

It's not that easy but Atlas should provide with a helpful library.

balabommala

ASKER

I need code in asp not in .net
Could someone help me with this?

Increasing points because of urgency.

Thanks.

peterxlane

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>

sybe

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.

balabommala

ASKER

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.

peterxlane

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.

ASKER CERTIFIED SOLUTION

peterxlane

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

balabommala

ASKER

Thanks peterxlane.
You are awesome!

peterxlane

Glad I could help. I would definitely recommend looking into some of the AJAX solutions for this type of thing...