自动完成不适用于 jquery 中的相同输入

Question

我正在使用 jquery autocomplete 作为我的 search box 当我给出一个输入时，它显示了匹配该输入的建议，之后我使用 my clear search icon 清除了输入，之后如果我再次giving the same input，它没有显示任何suggestion box，我很困惑为什么它不起作用，请帮助我解决这个问题。

我做的步骤：

在搜索框中，给定输入“s”
建议框显示两个值“first”、“second”。
选择了其中一个选项，然后单击 x icon 以清除搜索。（此图标将位于搜索框的末尾）
之后，再次给出相同的输入“s”。
现在意见箱不显示了(this is the issue)

Answer 1

您需要使用 : $('#myInput').keydown(); 修复错误

请检查以下代码：

$('#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>

自动完成不适用于 jquery 中的相同输入

Autocomplete is not working for same input in jquery

jquery

jquery-ui

autocomplete

jquery-plugins