Autocomplete is not working for same input in jquery

Question

source code: https://jsfiddle.net/8pma5hr4/2/

I'm using jquery autocomplete for my search box when I giving an input, it is showing suggestion matching that input, after that I cleared the input using my clear search icon, after that if I'm giving the same input again, it doesn't show any suggestion box, I'm confused that why it is not working, please help me to solve this issue.

Steps I did:

1. In the search box, given the input " s "
2. suggestion box shows with two values "first", "second".
3. selected one of the options, after that clicked on that x icon to clear the search. (this icon will be at the end of the search box)
4. after that, again given the same input " s ".
5. now the suggestion box is not showing (this is the issue)

Answer 1

You need to use : $('#myInput').keydown(); to fix the bug

Please check below code :

$('#myInput').autocomplete({
    delay: 0,
    source: ["first", "second"]
});

$('.clear_search').click(function () {
    $('#myInput').val('').keydown();
});

$("#myInput").on("change paste keyup", function () {
    if ($(this).val() == "") {
        $(".clear_search").addClass("hidden")
    } else {
        $(".clear_search").removeClass("hidden")
    }
});

.hidden
{
  display: none;
}

#boxx {
    border: none;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
    border-radius: 2px;
    height: 46px;
    outline: none;
    transition: box-shadow 200ms cubic-bezier(0.4,0.0,0.2,1);
    background-color: #fff;
    border-radius: 3px;
    border-top-color: rgb(160,160,160);
    cursor: text;
    display: inline-block;
    font: 18px arial,sans-serif;
    line-height: 36px;
    max-width: 672px;
    position: relative;
    width: 100%;
    border-bottom-left-radius: 0px;
}

#boxx>input {
    padding-left: 50px;
    padding-right: 50px;
    background: transparent;
    border: none;
    bottom: 0;
    box-sizing: border-box;
    left: 0;
    margin: 0;
    outline: none;
    position: absolute;
    /* top: 2px; */
    width: 100%;
    height: 100%;
    /* box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08); */
    box-shadow: 2px 0 2px 0 rgba(0, 0, 0, 0.08), -2px 0 1px -1px rgba(0, 0, 0, 0.08);
}

.gb_pf.gb_rf {
    visibility: inherit;
      background: none;
      border: none;
      outline: none;
      padding: 0 10px;
      line-height: 0;
      padding-top: 4px;
  }
  
  .clear_search .gb_pf.gb_rf {
    padding: 0px 0px;
    padding-top: 4px;
  }
  .clear_search {
    float: right;
    right: 2%;
    top: 4%;
    width: 6%;
    /* height: 46px !important; */
    color: grey;
    text-align: center;
    height: 90% !important;
    background: #fff;
    opacity: 0.54;
    cursor: pointer;
    z-index: 3;
    position: relative;
    }

<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" ></script>
      
<div class="mb-20 mt-10" id="boxx">
    <input id="myInput" type="url" title="search" placeholder="Search" style="border-bottom: 0 !important;">

    <span class="clear_search hidden" title="clear search">
        <button class="gb_pf gb_rf" aria-label="Clear search" type="button">

            <svg class="svg-style" focusable="false" height="38px" viewBox="0 0 24 24" width="24px" xmlns="http://www.w3.org/2000/svg"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>
        </button>
    </span>
</div>