textbox is not showing on first click

user_4711821 0
Viewed 101

I have input textbox that shows on click search button , but it does not show on first click it shows after first click or on double click. How to solve that.

My code:

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>

  <div id="loaction-search" style="background-color: red; padding: 5px; width:100px; border-radius:5px;"> search </div>

  <table>
    <tr>
      <td>
        <div style="position:relative;">
          <span class="clear-search"> X</span>
          <input type="type" placeholder="search here" name="name" value=" " id="locationsearchbox" style="display:none;" />
        </div>
      </td>
      <td>
        <a title="Zoom to India" id="loaction-search" class="map-icon-search">
                        click
                    </a>

      </td>
    </tr>

  </table>

  <script>
    $('#loaction-search').click(function() {
      $("#locationsearchbox").animate({
        width: 'toggle'
      }, 350, function() {
        $(this).focus()
      });
    })

    $(document).on('click', function(e) {
      var $target = $(e.target);
      if (!$target.closest('.clear-search').length && !$target.closest('#locationsearchbox').length) {
        $('#locationsearchbox').hide();
      }
    });

    $(".clear-search").click(function() {
      $('#locationsearchbox').val('');
    })
  </script>


</body>

</html>

jquery javascript
2 Answers

Use show() before focus.

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>

  <div id="loaction-search" style="background-color: red; padding: 5px; width:100px; border-radius:5px;"> search </div>

  <table>
    <tr>
      <td>
        <div style="position:relative;">
          <span class="clear-search"> X</span>
          <input type="type" placeholder="search here" name="name" value=" " id="locationsearchbox" style="display:none;" />
        </div>
      </td>
      <td>
        <a title="Zoom to India" id="loaction-search" class="map-icon-search">
                    click
                </a>

      </td>
    </tr>

  </table>

  <script>
    $('#loaction-search').click(function() {
      $("#locationsearchbox").animate({
        width: 'toggle'
      }, 350, function() {
        $()
        $(this).show();
        $(this).focus();
      });
    })

    $(document).on('click', function(e) {
      var $target = $(e.target);
      if (!$target.closest('.clear-search').length && !$target.closest('#locationsearchbox').length) {
        $('#locationsearchbox').hide();
      }
    });

    $(".clear-search").click(function() {
      $('#locationsearchbox').val('');
    })
  </script>


</body>

</html>

user_9651460

The main issue with tghe code was the logic that you handled to hide the #locationsearchbox was wrong. You have to exclude the #loaction-search element aswell since we are already handling the click event of the same, or else the action will trigger twice

$("#loaction-search").click(function () {
    $("#locationsearchbox").animate(
        {
            width: "toggle",
        },
        350,
        function () {
            $(this).focus();
        }
    );
});

$(document).on("click", function (e) {
    var $target = $(e.target);
    if (
        !$target.closest(".clear-search").length &&
        !$target.closest("#locationsearchbox").length &&
        !$target.closest("#loaction-search").length
    ) {
        $("#locationsearchbox").hide();
    }
});

$(".clear-search").click(function () {
    $("#locationsearchbox").val("");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div
    id="loaction-search"
    style="
    background-color: red;
    padding: 5px;
    width: 100px;
    border-radius: 5px;
    "
>
    search
</div>

<table>
    <tr>
    <td>
        <div style="position: relative">
        <span class="clear-search"> X</span>
        <input
            type="type"
            placeholder="search here"
            name="name"
            value=" "
            id="locationsearchbox"
            style="display: none"
        />
        </div>
    </td>
    <td>
        <a
        title="Zoom to India"
        id="loaction-search-2"
        class="map-icon-search"
        >
        click
        </a>
    </td>
    </tr>
</table>

user_60993270
Related