locked
Autocomplete textbox does nothing RRS feed

  • Question

  • User-1215707945 posted

    Hi, I'm trying to wire up the ACTK with an existing webservice I have in my project.
    I have successfully installed the toolkit and pasted code from the sample into my page.
    I have changed the service path and service methods to point to my own code.


    When I launch the page locally (through visual studio 2019) and type into the text box nothing happens. I have put a breakpoint in my asmx.cs file yet this is never hit.
    I have tried following the doco and demo on the Github pages but with no success.
    I'm hoping it is as simple as an event handler being missed out but can not be certain.
    Below is the full code for my "changeLocation.aspx" page (the code behind this page is empty)

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="changeLocation.aspx.cs" Inherits="AMO_CRM.changeLocation" %>
    
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
    <!DOCTYPE html>
    <head runat="server">
        <link href="Content/bootstrap.css" rel="stylesheet" />
        <style>
            body {
                font-size: xx-large;
                margin-left: 15px;
            }
        </style>
        <title></title>
    
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    
            <asp:TextBox runat="server" ID="txtProp" Width="30" autocomplete="off" />
            <ajaxToolkit:AutoCompleteExtender
                runat="server"
                BehaviorID="AutoCompleteEx"
                ID="autoComplete1"
                TargetControlID="txtProp"
                ServicePath="~/App_Code/properties.asmx"
                ServiceMethod="PropertySelect"
                MinimumPrefixLength="2"
                CompletionInterval="1000"
                EnableCaching="true"
                CompletionSetCount="20"
                CompletionListCssClass="autocomplete_completionListElement"
                CompletionListItemCssClass="autocomplete_listItem"
                CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"
                DelimiterCharacters=";, :"
                ShowOnlyCurrentWordInCompletionListItem="true">
                <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>
    
    
            <script type="text/javascript"> 
                // Work around browser behavior of "auto-submitting" simple forms 
                var frm = document.getElementById("form1");
                if (frm) {
                    frm.onsubmit = function () { return false; };
                }
            </script>
            <%-- Prevent enter in textbox from causing the collapsible panel from operating --%>
            <input type="submit" style="display: none;" />
                </form>
    </body>
    
    

    Friday, January 24, 2020 12:56 AM

All replies

  • User1535942433 posted

    Hi QPR_JAY,

    Accroding to your codes and description,I suggest you could press F12 to check what the problem.

    And you could check your codes:

    1.In .asmx, you must uncomment this line:

        // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
        [System.Web.Script.Services.ScriptService]
    

    2.In the method of PropertySelect,you must have this format:

    public string[] PropertySelect(string prefixText,int count)
    {}

    Best regards,

    Yijing Sun

    Friday, January 24, 2020 6:04 AM