AJAX AutoCompleteExtender

Hi, I'm a newbie to the AJAX tool kit.

I have few basic questions.

1) Is it necessary to have a webservice running to get the data from the data base.. My question is, assume i have a list of Employee names.As soon as i started typing in the Text Field i need to display the Employee name. I have seen a Video session on this. but do we exactly need to run the webservice which has data base conection and retrieval from the database?

2) is it sufficient to have a method to get the data from DB in the .cs file.

Suggest me the Best one.

Tell me a best practise link where i can learn them from basics...

Thanks,

Mythily

Hi Mythily,

No, you have an alternative option, PageMethod. This is a static method defined in the page itself and can be accessed from client side directly.

For example:

// this method is defined in the page itself
[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public staticstring[] GetCompletionList(string prefixText, int count)
{
string[] words = prefixText.Split(new char[] { ';' });
string[] result = new string[16];
for (int i = 0; i < 16; i++)
{
result[i] = "aaaa";
}
return result;
}

<ajaxToolkit:AutoCompleteExtender CompletionSetCount="4" CompletionListCssClass="completeListStyle" BehaviorID="ace" ID="AutoCompleteExtender1"ServicePath="AutoCompleteExtender.aspx" ServiceMethod="GetCompletionList"runat="server" TargetControlID="TextBox1">

Hope

Ajax Auto Complete Text Box

hi experts,

i am using the Ajax Auto Complete, i have used in the same way the Ajax Tool Kit has. The auto complete values are coming fine but the drop down window is transparent and i can see the control behind that. even the style sheet i have used the same way the example has but icant figure out what is the problem.

another problem is when i click enter in the text box(which is enabled for auto complete) i am getting an run time error 'this.postbacksettings.async' is null or not an object.

can any one help on this.

Thank you.

I had to double check. I do not have specific CSS attached to my AutoComplete. Are you using CSS friendly adapters? If you can post your text box, auto complete and snip it of CSS that would help.

hi,

i have followed this site,

http://asp.net/AJAX/Control-Toolkit/Live/AutoComplete/AutoComplete.aspx

and done the same way it has been said and downloaded the web application and used the css also whihc is given in this application. the CSS is

/*AutoComplete flyout */

.autocomplete_completionListElement
{
visibility :hidden;
margin :0px!important;
background-color :inherit;
color :windowtext;
border :buttonshadow;
border-width :1px;
border-style :solid;
cursor :'default';
overflow :auto;
height :100px;
text-align :left;
list-style-type :none;
}

/* AutoComplete highlighted item */

.autocomplete_highlightedListItem
{
background-color:#ffff99;
color:black;
padding:1px;
}

/* AutoComplete item */

.autocomplete_listItem
{
background-color :window;
color :windowtext;
padding :1px;
}

/*trial for the test*/

.ContextMenuPanel
{
border:1pxsolid#868686;
z-index:1000;
background:url(images/menu-bg.gif)repeat-y00#FAFAFA;
cursor:default;
padding:1px1px0px1px;
font-size:11px;
}

.ContextMenuBreak
{
margin:1px1px1px32px;
padding:0;
height:1px;
overflow:hidden;
display:block;
border-top:1pxsolid#C5C5C5;
}

a.ContextMenuItem
{
margin:1px01px0;
display:block;
color:#003399;
text-decoration:none;
cursor:pointer;
padding:4px19px4px33px;
white-space:nowrap;
}

a.ContextMenuItem-Selected
{
font-weight:bold;
}

a.ContextMenuItem:hover
{
background-color:#FFE6A0;
color:#003399;
border:1pxsolid#D2B47A;
padding:3px18px3px32px;
}

/*trial for the test*/

the code is

<AjaxToolkit:AutoCompleteExtender
runat="server"
BehaviorID="AutoCompleteEx"
id="autocomplete1"
targetcontrolid="txtAnswerDesc"
minimumprefixlength="1"
servicemethod="GetCompletionList"
servicepath="../Helpinfo.asmx"
CompletionInterval="1000"
EnableCaching="true"
CompletionSetCount="5"
CompletionListCssClass="autocomplete_completionListElement"
CompletionListItemCssClass="autocomplete_listItem"
CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"
>
<Animations>
<OnShow>
<Sequence>
<%-- Make the completion list transparent and then show it --%>
<OpacityAction Opacity="0" />
<HideAction Visible="true" />

<%--Cache the original size of the completion list the first time
the animation is played and then set it to zero --%>
<ScriptAction Script="
// Cache the size and setup the initial size
var behavior = $find('AutoCompleteEx');
if (!behavior._height) {
var target = behavior.get_completionList();
behavior._height = target.offsetHeight - 2;
target.style.height = '0px';
}" />

<%-- Expand from 0px to the appropriate size while fading in --%>
<Parallel Duration=".4">
<FadeIn />
<Length PropertyKey="height" StartValue="0" EndValueScript="$find('AutoCompleteEx')._height" />
</Parallel>
</Sequence>
</OnShow>
<OnHide>
<%-- Collapse down to 0px and fade out --%>
<Parallel Duration=".4">
<FadeOut />
<Length PropertyKey="height" StartValueScript="$find('AutoCompleteEx')._height" EndValue="0" />
</Parallel>
</OnHide>
</Animations>
</ajaxtoolkit:autocompleteextender>

Anything else if you need let me know.

thank you.

I haven't had a chance to completely review this, however, on a quick look check out the background-color for both the ".autocomplete_completionListElement" and ".autocomplete_listItem" classes. The inherited and window options may be playing havoc especially if the browsers background color is set to transparant. Have you tried specifying a color in both of those classes?

thanks for your reply.

i have tried changing the background color and still i am seeing the controls behing the list item.

please help me to solve this.

Have you tried adding a div as target for autocomplete?

<divID="divAutoComp"></div>

And in:

<ajaxToolkit:AutoCompleteExtenderCompletionListElementID="divAutoComp" etc..>

Then you could "manually" style the div...

hi,

thanks for your reply. i am having a form->table->text box and outside that table i am having the AutoCompleteExtender. can you explain me where i should use the DIV and for target what control i have to give.

waiting for your reply!!!!

- Place the div whereever you want the suggestions to appear.

-<ajaxToolkit:AutoCompleteExtenderrunat="server"ID="ACE1"

MinimumPrefixLength="2"CompletionSetCount="1"CompletionInterval="1"

TargetControlID="userTB"EnableCaching="false"CompletionListElementID="divAutoComp"

ServiceMethod="GetMail">

**TargetControlIDis the textbox you want autocomplete to work on.

**CompletionListElementID is the div where you want the suggestions to appear.

(**CompletionSetCount is the number of suggestions you want to see)

NNM:

**CompletionListElementID is the div where you want the suggestions to appear.

I didn't need to specify a CompletionListElementID, however that is a good tip. I can all ready see a good use for that!. Thanks, NNM.

k2schreck:

NNM:

**CompletionListElementID is the div where you want the suggestions to appear.

I didn't need to specify a CompletionListElementID, however that is a good tip. I can all ready see a good use for that!. Thanks, NNM.

but for my code it doesnt make much difference. it still works the same way as it was working before giving the CompletionListElementID .

sbadriprasad:

but for my code it doesnt make much difference. it still works the same way as it was working before giving the CompletionListElementID .

Do you use multiple css files? If so exclude one at a time and test to see if it works. That will help narrow down a css culprit. I have not caputred the return html from the AutoComplete so I don't know if it uses a div, table, ul etc. but examine closely any generic tags in your css file. One of them may be causing the troubles.

Gook luck!

AJAX and formview

I downloaded the tool kit, but I am not sure which "example" I want to use. On my development web site:http://ptkvb.delfraisse.com, I have a formview to display "programs". Right now it has 1, 2 and 3 for the different programs. The problem is the post back. Would AJAX be a solution for me? Should I use formviews at all? I would like to auto switch to each of them every 30 seconds as well. I also would like to change the buttons on the bottom to "Prev * *(*) * * Next" type style (as displayed on this idea graphic:http://delfraisse.com/external/ptk/ptk-default.gif).

Thanks for your time.

Hi,

I made a sample according to your requirement with pure javascript, please try it:

<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"> protected void Page_Load(object sender, EventArgs e) { } </script><html xmlns="http://www.w3.org/1999/xhtml" ><head id="Head1" runat="server"> <title>Untitled Page</title><script language="javascript" type="text/javascript">// <!CDATA[var index = 0;var projects = new Array();function pageLoad() { projects[0]=$get("Panel1"); projects[1]=$get("Panel2"); projects[2]=$get("Panel3"); displayProject(); window.setInterval(autoIncrease, 1000);}function Button1_onclick() { --index; displayProject();}function Button2_onclick() { ++index; displayProject();}function autoIncrease() { ++index; displayProject();}function displayProject() { for(var i=0; i projects[i].style.display ="none"; index = index%3; projects[index].style.display = "";}// ]]></script></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px"> Project 1</asp:Panel> <asp:Panel ID="Panel2" runat="server" Height="50px" Width="125px"> Project 2</asp:Panel> <asp:Panel ID="Panel3" runat="server" Height="50px" Width="125px"> Project 3</asp:Panel> <input id="Button1" type="button" value="Previous" onclick="return Button1_onclick()" /> <input id="Button2" type="button" value="Next" onclick="return Button2_onclick()" /> </form></body></html>

That only shows three projects. I need it to pull from the database and pull as many projects are in there. Right now my post back script is pulling from the database, that way I can add a project with a form or directly in the database.

The sample is mainly used to demonstrate how to use javascript to achieve your requirements, you may create panels and javascript dynamically according to the number of records in database.