G
Guest
I need to create a Auto suggests Textboox like in
http://www.google.com/webhp?complete=1&hl=en
I have completed this using AJAX.NET for Framework 1.1 . I have some design
issues after the data is populated.
For me the problem is I am getting more space after the item is selected.
And the items are displayed in a combo when i am going for another search /
selection without refreshing the page.
I am expecting a same output as google's auto suggested textbox.
see my work at http://www.reccustodian.com/Dropdown/Neworder.aspx
Please let me know if you get any on this.
The below is the javascript which helps to display the text box and the combo
//matches select
var matcheList = document.getElementById("matches");
//called by the onKeyUp javascript event on the input
function FindMatches(searchCriteria)
{
if (searchCriteria)
{
//SearchComplection is defined by Ajax.Net because that's the name of
the type we registered
NewOrder.FindMatches(searchCriteria, FindMatches_CallBack);
}
else
{
//clear the states dropdown
matcheList.style.visibility = "hidden";
}
}
//callback we told Ajax.Net to pass the response tos
function FindMatches_CallBack(response)
{
//if the server side code threw an exception
if (response.error != null)
{
alert(response.error); //we should probably do better than this
return;
}
//if we didn't get what we expect, or didn't get any matches
if (!response.value || response.value.length == 0)
{
matcheList.style.visibility = "hidden";
return;
}
matcheList.style.visibility = "visible";
matcheList.options.length = 0; //reset the states dropdown
matcheList.size = response.value.length; //dynamically set the size of
the select box
for (var i = 0; i < response.value.length; ++i)
{
matcheList.options[matcheList.options.length] = new
Option(response.value);
}
}
//called when a match item is selected from the list
function MatchSelected(matches)
{
var state = document.getElementById("state");
var divDisp = document.getElementById("divList");
state.value = matches.options[matches.selectedIndex].text;
matcheList.style.visibility = "hidden";
//document.frmOrder.txtPClaimNo.focus();
matcheList.style.height="40px"
divDisp.style.visibility = "hidden";
selected = matcheList.options.selectedIndex;
value = state.value
if (selected !=0 || selected ==0)
{
count=3
for (var i = 0, oldpos = -1; i<count-1; i++)
{
pos = value.indexOf(',',oldpos+1);
data = value.substring(oldpos+1,pos);
frmOrder.elements['txtC' + i].value = value.substring(oldpos+1,pos);
oldpos = pos;
}
frmOrder.elements['txtC' + i].value =
value.substring(oldpos+1,value.length)
}
}
Thanks
Kumar
http://www.google.com/webhp?complete=1&hl=en
I have completed this using AJAX.NET for Framework 1.1 . I have some design
issues after the data is populated.
For me the problem is I am getting more space after the item is selected.
And the items are displayed in a combo when i am going for another search /
selection without refreshing the page.
I am expecting a same output as google's auto suggested textbox.
see my work at http://www.reccustodian.com/Dropdown/Neworder.aspx
Please let me know if you get any on this.
The below is the javascript which helps to display the text box and the combo
//matches select
var matcheList = document.getElementById("matches");
//called by the onKeyUp javascript event on the input
function FindMatches(searchCriteria)
{
if (searchCriteria)
{
//SearchComplection is defined by Ajax.Net because that's the name of
the type we registered
NewOrder.FindMatches(searchCriteria, FindMatches_CallBack);
}
else
{
//clear the states dropdown
matcheList.style.visibility = "hidden";
}
}
//callback we told Ajax.Net to pass the response tos
function FindMatches_CallBack(response)
{
//if the server side code threw an exception
if (response.error != null)
{
alert(response.error); //we should probably do better than this
return;
}
//if we didn't get what we expect, or didn't get any matches
if (!response.value || response.value.length == 0)
{
matcheList.style.visibility = "hidden";
return;
}
matcheList.style.visibility = "visible";
matcheList.options.length = 0; //reset the states dropdown
matcheList.size = response.value.length; //dynamically set the size of
the select box
for (var i = 0; i < response.value.length; ++i)
{
matcheList.options[matcheList.options.length] = new
Option(response.value);
}
}
//called when a match item is selected from the list
function MatchSelected(matches)
{
var state = document.getElementById("state");
var divDisp = document.getElementById("divList");
state.value = matches.options[matches.selectedIndex].text;
matcheList.style.visibility = "hidden";
//document.frmOrder.txtPClaimNo.focus();
matcheList.style.height="40px"
divDisp.style.visibility = "hidden";
selected = matcheList.options.selectedIndex;
value = state.value
if (selected !=0 || selected ==0)
{
count=3
for (var i = 0, oldpos = -1; i<count-1; i++)
{
pos = value.indexOf(',',oldpos+1);
data = value.substring(oldpos+1,pos);
frmOrder.elements['txtC' + i].value = value.substring(oldpos+1,pos);
oldpos = pos;
}
frmOrder.elements['txtC' + i].value =
value.substring(oldpos+1,value.length)
}
}
Thanks
Kumar