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!