Question

所以 - jquery自动完成和带有特殊字符图标的额外div可以插入搜索框（例如É，ã等）...

每当用户输入 - 自动完成下拉列表出现时，但当用户需要点击特殊字符图标时（因此它会插入搜索框中） - ＆gt;自动完成下拉列表可以预测在焦点丢失时关闭:(

当用户点击其中一个特殊字符图标时，有没有办法阻止jquery自动完成下拉列表隐藏丢失的焦点？

Answer 1

编辑：这是针对jquery自动完成组合框用于选择框，但同样的解决方案和思维过程也适用于自动完成（当我遇到你的时候我正在使用组合框问题：）

<强> HTML：

<select class="combobox">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="add_another">Add Another Option</option>
</select>

<强> CSS：

.force-open{
    display:block !important;
}

<强> JS：

$(function() {
$( ".combobox" ).combobox({

     // the select event is apparently the only event
     // that you can pass a function, so if your goal
     // is to keep it open specifically when a user
     // clicks an option, then this is where you should start

     select: function(event, ui) {
            $(event.currentTarget)
            .parent()
            .next("ul")
            .addClass("force-open");
     }
});


$(".custom-combobox .ui-button").click(function(){

    //This is the actual answer to your question,
    //which is specifically forcing the jquery selectbox
    //to stay open after it has already been opened,
    //regardless of the change in focus.

    $(this)
    .parent()
    .next("ul")
    .addClass("force-open");
})
});

<强>解释

通常情况下，如果在进行Web开发时没有针对给定库或大量代码的良好公开事件（除了尝试入侵/更新源代码之外），我尝试做的是查看结构从库/ js生成的html（如果有的话）。

在这种情况下，在调用$（＆＃34; .combobox＆＃34;）。combobox（{...}）之后从jquery-ui生成的html是：

<select class="combobox" style="display: none;">
....shown above in HTML section...
<span class="custom-combobox">
<span class="ui-helper-hidden-accessible" role="status" aria-live="polite">4 results are available, use up and down arrow keys to navigate.</span>
<input class="custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left ui-autocomplete-input" title="" autocomplete="off">
<a class="ui-button ui-widget ui-state-default ui-button-icon-only custom-combobox-toggle ui-corner-right" tabindex="-1" title="Show All Items" role="button" aria-disabled="false">
</span>
<ul id="ui-id-1" class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-corner-all" tabindex="0" style="display: none; width: 209px; top: 43px; left: 8px;">
<li class="ui-menu-item" role="presentation">
<a id="ui-id-2" class="ui-corner-all" tabindex="-1">Volvo</a>
</li>
<li class="ui-menu-item" role="presentation">
<a id="ui-id-3" class="ui-corner-all" tabindex="-1">Saab</a>
</li>
<li class="ui-menu-item" role="presentation">
<a id="ui-id-4" class="ui-corner-all" tabindex="-1">Mercedes</a>
</li>
<li class="ui-menu-item" role="presentation">
<a id="ui-id-5" class="ui-corner-all" tabindex="-1">Add Another Option</a>
</li>
</ul>

这给了我一个很好的起点，以便添加/删除css类以强制我想要的功能。请记住，这是最后的手段，只有在没有完整功能的api来帮助绑定/取消绑定事件时才应该滥用。通过检查html结构，我可以使用jquery选择器/方法来获取正确的＆＃39; ul＆＃39;标签我试图保持开放，在这种情况下。所以在我抓住了我想要使用jquery的ul后，我添加了类和强制打开＆＃39;它有＆显示：block！important;＆＃39;最终强迫jquery组合框保持开放，无论焦点如何。现在只需删除Class＆＃39;强制打开＆＃39;当你觉得是时候关闭了＃39;组合框。

希望这会有所帮助:)。

jquery autocomplete - 单击外部div时阻止关闭它？

1 个答案: