locked
asp textbox Placeholder and autocomplete doesnt work together in IE8 RRS feed

  • Question

  • User-1659672931 posted

    I have a texbox and it has placeholder and jquery autocomplete functionality. Both are working fine in chrome but in IE8 placeholder is not working. In order to make it work I place watermark for placeholder in jquery but then  watermark is displaying but autocomplete is not working. Below is my code:

    <asp:TextBox ID="txtLocation" runat="server" CssClass="frmhometxtLocation" placeholder="Locations"
                                    onblur="Javascript:FormatLocation();"></asp:TextBox>
    
    
                $("#txtLocation")
                // don't navigate away from the field on tab when selecting an item
                  .bind("keydown", function (event) {
                      if (event.keyCode === $.ui.keyCode.TAB &&
                        $(this).autocomplete("instance").menu.active) {
                          event.preventDefault();
                      }
                  })
    
                  .autocomplete({
                      delay: 0,
                      minLength: 1,
                      source: function (request, response) {
                          // delegate back to autocomplete, but extract the last term
                          response($.ui.autocomplete.filter(
                        locations, extractLast(request.term)));
                      },
                      focus: function () {
                          // prevent value inserted on focus
                          return false;
                      },
                      select: function (event, ui) {
                          var terms = split(this.value);
                          // remove the current input
                          terms.pop();
                          // add the selected item
                          terms.push(ui.item.value);
                          // add placeholder to get the comma-and-space at the end
                          terms.push("");
                          this.value = terms.join(", ");
                          return false;
                      }
                  });
            });

    Please advice

    Monday, July 25, 2016 4:21 PM

Answers

  • User61956409 posted

    Hi anuragrawat123,

    As far as I know, IE10+ support placeholder attribute, so as you said it does not work fine in IE8. For same similar effect, you could try to use TextBoxWatermarkExtender control, the following sample is for your reference.

    <script>
        $(function () {
    
            var availableTags = [
                "ActionScript",
                "AppleScript",
                "Asp",
                "BASIC",
                "C",
                "C++"];
    
            $("#TextBox1").autocomplete({
                source: availableTags
            });
        });
    </script>
    
    <div>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server" BehaviorID="myTextBoxBehavior" TargetControlID="TextBox1" WatermarkText="Locations"></asp:TextBoxWatermarkExtender>
        <%--<input id="btnget" type="button" value="Get" />--%>
    </div>
    

    Best Regards,

    Fei Han



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, July 26, 2016 11:16 AM