Save a click

[kevin197]

This a mix of asp.net, ajax and javascript.

I have a search box for product codes on the site where people can type in what they are looking for. After the first 2 letters have been entered the ajax brings up a drop bown box for searches starting with them letters.

You can then click the search term your after in the drop down box list and then click search or press enter.

It is this last action (the click the search button or press enter) that I would like to remove.

I have been looking around the onchange/onclick in javascript which looks like it might work but this isn't really my kind of thing so I'm a bit lost.

The asp code for this part is

<asp:Panel ID="yel" runat="server" DefaultButton="imgBtnSearch">
<asp:Label ID="lblLoginName" runat="server" CssClass="BodyText" Font-Bold="True"></asp:Label><p>
<span class="q">Quick search:</span>
<asp:TextBox ID="txtQuickSearch" runat="server" CssClass="BodyText" AutoComplete="Off" TabIndex="1">keywords or code</asp:TextBox>
<asp:ImageButton ID="imgBtnSearch" runat="server" ImageUrl="~/im/go_2.gif" CausesValidation="False" TabIndex="2"></asp:ImageButton>
<asp:HyperLink ID="hpAZ" runat="server" NavigateUrl="~/AToZIndex.aspx" Text="A-Z Index" CssClass="RedText"></asp:HyperLink>
</p>
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</cc1:ToolkitScriptManager>

<cc1:AutoCompleteExtender ID="AutoCompleteEx" runat="server" 
CompletionInterval="20" 
CompletionListCssClass="srchSuggest" 
CompletionListHighlightedItemCssClass="srchSugLIA" 
CompletionListItemCssClass="srchSugLI" 
CompletionSetCount="20" 
DelimiterCharacters=";, :" 
EnableCaching="true" 
MinimumPrefixLength="2" 
ServiceMethod="GetSuggestList" 
ServicePath="~/SearchService.asmx" 
TargetControlID="txtQuickSearch" >
</cc1:AutoCompleteExtender>

<%--<cc2:AutoCompleteExtraExtender ID="AutoCompleteEx_" runat="server" 
    CompletionInterval="20" 
    CompletionListCssClass="srchSuggest" 
    CompletionListHighlightedItemCssClass="srchSugLIA" 
    CompletionListItemCssClass="srchSugLI" 
    CompletionSetCount="20" 
    DelimiterCharacters=";, :" 
    EnableCaching="false" 
    MinimumPrefixLength="2" 
    ServiceMethod="GetCompletionList"     
    TargetControlID="txtQuickSearch" 
    OnItemSelected="test" 
    AsyncPostback="false" UseContextKey="True" AutoPostback="true" >
</cc2:AutoCompleteExtraExtender>--%>

</asp:Panel>
</div>

I was looking at something like maybe the following

<asp:Panel ID="yel" runat="server" DefaultButton="imgBtnSearch">
<asp:Label ID="lblLoginName" runat="server" CssClass="BodyText" Font-Bold="True"></asp:Label><p>
<span class="q">Quick search:</span>
<asp:TextBox ID="txtQuickSearch" runat="server" CssClass="BodyText" AutoComplete="Off" TabIndex="1" onchange="imgBtnSearch">keywords or code</asp:TextBox>
<asp:ImageButton ID="imgBtnSearch" runat="server" ImageUrl="~/im/go_2.gif" CausesValidation="False" TabIndex="2"></asp:ImageButton>
<asp:HyperLink ID="hpAZ" runat="server" NavigateUrl="~/AToZIndex.aspx" Text="A-Z Index" CssClass="RedText"></asp:HyperLink>
</p>
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</cc1:ToolkitScriptManager>

<cc1:AutoCompleteExtender ID="AutoCompleteEx" runat="server" 
CompletionInterval="20" 
CompletionListCssClass="srchSuggest" 
CompletionListHighlightedItemCssClass="srchSugLIA" 
CompletionListItemCssClass="srchSugLI" 
CompletionSetCount="20" 
DelimiterCharacters=";, :" 
EnableCaching="true" 
MinimumPrefixLength="2" 
ServiceMethod="GetSuggestList" 
ServicePath="~/SearchService.asmx" 
TargetControlID="txtQuickSearch" >
</cc1:AutoCompleteExtender>

<%--<cc2:AutoCompleteExtraExtender ID="AutoCompleteEx_" runat="server" 
    CompletionInterval="20" 
    CompletionListCssClass="srchSuggest" 
    CompletionListHighlightedItemCssClass="srchSugLIA" 
    CompletionListItemCssClass="srchSugLI" 
    CompletionSetCount="20" 
    DelimiterCharacters=";, :" 
    EnableCaching="false" 
    MinimumPrefixLength="2" 
    ServiceMethod="GetCompletionList"     
    TargetControlID="txtQuickSearch" 
    OnItemSelected="test" 
    AsyncPostback="false" UseContextKey="True" AutoPostback="true" >
</cc2:AutoCompleteExtraExtender>--%>

</asp:Panel>
</div>

Would this work or have I got it wrapped round my neck?

Any help at all would be great as I don't even know if I'm looking in the right place.

Thanks

 

[RhythmAddict112]

I think the trick here is being able to determine when you're ready to fire the event to begin searching. I would think that whenever the length of the value of txtQuickSearch is greater than 0 that you'd be ready to fire this event. You'd probably want to use the OnTextChanged event to do this.

Before doing any of that, though, you may want to set the AutoPostBack property to true on txtQuickSearch. Then, keep the button there and make sure the click event for the button is handled. If that all works how you want it then you can just use to JavaScript to hide the button.

HTH

http://geekswithblogs.net/sanjayu/