locked
JQuery autocomplete textbox does not work as needed after form reset in UpdatePanel RRS feed

  • Question

  • User454094798 posted

    Hi All,

    I have a autocomplete text box for city, state and country in an Update Panel. After submitting the data to DB, i am clearing all the fields including autocomplete text box to null as below...

    txtAutoComplete.Value="";

    This works well, but when i come for another submission, i couldn't see suggestions when i type something on to autocomplete text box.

    How to overcome this issue? Is there any way to clear automcomplete field.

     

    Wednesday, August 24, 2016 10:11 PM

Answers

  • User-1142886626 posted

    Hi Tanu,

    Encapsulate the event and binding it in a function and run it every time you update the page. It will work fine.

    Code below is for your reference:

    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"/>
      <link rel="stylesheet" href="/resources/demos/style.css"/>
      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
      <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
        <script type="text/javascript">
            function BindEvents() {
                $(document).ready(function() {
                    var availableTags = [
                 "ActionScript",
                 "AppleScript",
                 "Asp",
                "BASIC",
                 "C",
                 "C++",
                 "Clojure",
                 "COBOL",
                 "ColdFusion",
                 "Erlang",
                 "Fortran",
                 "Groovy",
                 "Haskell",
                    ];
                    $("#txtName").autocomplete({
                        source: availableTags
                    });
                    $("#Button1").click(function () {
                        $("#txtName").val('');
                    })
                    });
                }
        </script>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
        <div>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                 <ContentTemplate>
                      <script type="text/javascript">
                        Sys.Application.add_load(BindEvents);
                      </script>
                  <asp:TextBox ID="txtName" runat="server" />
                     <asp:Button ID="Button1" runat="server" Text="Button"/>
                 </ContentTemplate>
            </asp:UpdatePanel>
        </div>
        </form>
    </body>
    

    Best Regards,

    Ailleen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, August 25, 2016 11:59 AM