Автозаполнение не работает для того же ввода в JQuery - PullRequest
Новая
       21

Автозаполнение не работает для того же ввода в JQuery

0 голосов
/ 06 октября 2018

исходный код: https://jsfiddle.net/8pma5hr4/2/

Я использую jquery autocomplete для моего search box, когда я даю ввод, он показывает предложение, совпадающее с этим вводом, после чего я очистил ввод, используя my clear search icon, после этого, если я снова giving the same input, он не показывает suggestion box, я запутался, почему он не работает, пожалуйста, помогите мне решить эту проблему.

Шаги Idid:

  1. В поле поиска, при условии ввода "s"
  2. окно предложения показывает с двумя значениями "first", "second".
  3. выбрал один из вариантов, после чего кликнул на x icon, чтобы очистить поиск.(этот значок будет в конце окна поиска)
  4. после этого, снова с тем же вводом "s".
  5. теперь окно предложения не отображается (this is the issue)

1 Ответ

0 голосов
/ 06 октября 2018

Вам необходимо использовать: $('#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>
...