goodk
asked on
how do get a drop down values filled as I am typing
ok, the ajax code is working and I do get the returned value in
document.getElementById("t xtHint").i nnerHTML = xmlhttp.responseText;
but I really want the value to change in the field I am typing the value or the field becomes a dropdown as I am typing.
document.getElementById("t
but I really want the value to change in the field I am typing the value or the field becomes a dropdown as I am typing.
<input type="text" name="txtn1" id="txt1" .....................
CODE:
<%@ Page Language="C#" AutoEventWireup="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function showHint(str)
{
var xmlhttp;
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajaxresponse.aspx?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<h3>Start typing a name in the input field below:</h3>
<form id="form1" action="">
First name: <input type="text" name="txtn1" id="txt1" onkeyup="showHint(this.value)" />
<p>Suggestions: <span id="txtHint"></span></p>
</form>
server file CODE
<%@ Page Language="C#" AutoEventWireup="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<%
Response.Expires=-1;
string[] a = new string[30];
//Fill up array with names
a[1]="Anna";
a[2]="Brittany";
a[3]="Cinderella";
//get the q parameter from URL
string q=Request.QueryString["q"];
q=q.ToUpper();
string hint="";
//lookup all hints from array if length of q>0
if (q.Length>0)
{
for (int i=1;i<30;i++)
{/*
if(q=ucase(mid(a[i].,1,len(q))) then
if hint="" then
hint=a(i)
else
hint=hint & " , " & a(i)
end if
end if
*/
}
}
hint=a[1];
//'Output "no suggestion" if no hint were found
//'or output the correct values
if (hint == "")
Response.Write("no suggestion");
else
Response.Write(hint);
%>
</div>
</form>
</body>
</html>
ASKER
when I down loaded the code, it appeared very complex and I just could not get it to work on asp.net browser.
http://view.jquery.com/trunk/plugins/autocomplete/demo/
I looked at the other links also, but I just confused myself more.
If you kindly see my code it is working; all I am asking is how to modify the input field I have?
May be I am asking a help of couple of lines of code. (I think?) thanks
1 - Please confirm you like it (check the first textbox on the demo link) and it answer your question fully
Some lines of code (all propose a basic template, an input field in the page, nothing more) :
http://blogs.msdn.com/b/joecar/archive/2009/01/08/autocomplete-with-asp-net-mvc-and-jquery.aspx
http://ericdotnet.wordpress.com/2009/04/09/jquery-search-box-and-aspnet-mvc/
http://www.dotnetcurry.com/ShowArticle.aspx?ID=515
You need to accept there's more than a little update of your code to provide what you want
Else you may create a basic javascript array on the fly with c# but you will miss the main advantage of ajax (one of the zones you selected)
Some lines of code (all propose a basic template, an input field in the page, nothing more) :
http://blogs.msdn.com/b/joecar/archive/2009/01/08/autocomplete-with-asp-net-mvc-and-jquery.aspx
http://ericdotnet.wordpress.com/2009/04/09/jquery-search-box-and-aspnet-mvc/
http://www.dotnetcurry.com/ShowArticle.aspx?ID=515
You need to accept there's more than a little update of your code to provide what you want
Else you may create a basic javascript array on the fly with c# but you will miss the main advantage of ajax (one of the zones you selected)
ASKER
is it possible to write the AJAX based dropdown without using mvc or jquery but just expand on the following comprehensive example?
http://www.w3schools.com/ajax/ajax_aspphp.asp
my question was how to expand the above example? thanks
http://www.w3schools.com/ajax/ajax_aspphp.asp
my question was how to expand the above example? thanks
replace this part :
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
by :if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML="<div class='dropdown' onclick='alert(this.innerHTML)'>" + xmlhttp.responseText.split(" , ").join("</div></div class='dropdown' onclick='alert(this.innerHTML)'>") + "</div>";
}
ASKER
I tried it into all three ids but nothing changed, can you kindly try it?
<%@ Page Language="C#" AutoEventWireup="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function showHint(str)
{
var xmlhttp;
if (str.length==0)
{
document.getElementById("t xtHint").i nnerHTML=" ";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.X MLHTTP");
}
xmlhttp.onreadystatechange =function( )
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
// document.getElementById("t xtHint").i nnerHTML = xmlhttp.responseText;
// document.getElementById("T ext1").val ue = xmlhttp.responseText;
document.getElementById("T ext1").inn erHTML = "<div class='dropdown' onclick='alert(this.innerH TML)'>" + xmlhttp.responseText.split (" , ").join("</div></div class='dropdown' onclick='alert(this.innerH TML)'>") + "</div>";
// document.getElementById("t xtHint").i nnerHTML = "<div class='dropdown' onclick='alert(this.innerH TML)'>" + xmlhttp.responseText.split (" , ").join("</div></div class='dropdown' onclick='alert(this.innerH TML)'>") + "</div>";
// document.getElementById("t xt1").inne rHTML = "<div class='dropdown' onclick='alert(this.innerH TML)'>" + xmlhttp.responseText.split (" , ").join("</div></div class='dropdown' onclick='alert(this.innerH TML)'>") + "</div>";
// document.form1.text1.value = xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajaxre sponse.asp x?q="+str, true);
xmlhttp.send();
}
</script>
</head>
<body>
<h3>Start typing a name in the input field below:</h3>
<form id="form1" action="">
First name: <input type="text" name="txtn1" id="txt1" onkeyup="showHint(this.val ue)" />
<input type="text" name="Text1" id="Text1" />
<p>Suggestions: <span id="txtHint"></span></p>
</form>
</body>
</html>
<%@ Page Language="C#" AutoEventWireup="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function showHint(str)
{
var xmlhttp;
if (str.length==0)
{
document.getElementById("t
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.X
}
xmlhttp.onreadystatechange
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
// document.getElementById("t
// document.getElementById("T
document.getElementById("T
// document.getElementById("t
// document.getElementById("t
// document.form1.text1.value
}
}
xmlhttp.open("GET","ajaxre
xmlhttp.send();
}
</script>
</head>
<body>
<h3>Start typing a name in the input field below:</h3>
<form id="form1" action="">
First name: <input type="text" name="txtn1" id="txt1" onkeyup="showHint(this.val
<input type="text" name="Text1" id="Text1" />
<p>Suggestions: <span id="txtHint"></span></p>
</form>
</body>
</html>
ASKER
I think this is a big problem on Expert-Exchange that if the person helping you do not know the solution or do not want to help further that he does not have way to pass it on to someone else.
I am still waiting for help;
thanks
replace :
.join("</div></div class
by :
.join("</div><div class
use : document.getElementById("txtHint").innerHTML = "<div class='dropdown' onclick='alert(this.innerH TML)'>" + xmlhttp.responseText.split (" , ").join("</div><div class='dropdown' onclick='alert(this.innerH TML)'>") + "</div>";
you will need to play with css to have a better design of the dropdown and put it where you want
you will need to hide it once the user choose an option
leakim971-519939.flv
.join("</div></div class
by :
.join("</div><div class
use : document.getElementById("txtHint").innerHTML = "<div class='dropdown' onclick='alert(this.innerH
you will need to play with css to have a better design of the dropdown and put it where you want
you will need to hide it once the user choose an option
leakim971-519939.flv
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
thanks a lot for your help;
this was fairly simple once I understood how to menupulate innerhtml
I learned a lot this way; no fun using jquery and other partial libraries
this was fairly simple once I understood how to menupulate innerhtml
I learned a lot this way; no fun using jquery and other partial libraries
https://www.experts-exchange.com/questions/27278251/classic-asp-ajax-reading-db.html
https://www.experts-exchange.com/questions/26568116/Ajax-autocomplete-using-Classic-asp-and-SQL-server.html
test page : http://view.jquery.com/trunk/plugins/autocomplete/demo/