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

Posted 2023-05-08

【中文标题】自动完成不适用于 jquery 中的相同输入

【英文标题】：Autocomplete is not working for same input in jquery

【发布时间】：2019-03-11 14:21:03

【问题描述】：

源代码：https://jsfiddle.net/8pma5hr4/2/

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

我做的步骤：

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

【问题讨论】：

只需将$('#myInput').keyup(); 替换为$('#myInput').keydown();

@Ash-b 感谢您的回复，但具体的问题是什么？

【参考方案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"  viewBox="0 0 24 24"  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>

【讨论】：

但是为什么我们不应该在这里使用 keyup 事件呢？

这是因为只有keyDown() 事件会在键盘上的任何键上触发，包括所有特殊键，如Ctrl、Alt、Shift、Enter、Backspace 等。

查看此示例以进一步了解关键事件howtodoinjava.com/scripting/jquery/…