jQuery自動完成功能-防止在外部div上單擊時將其關閉？

Question

因此-jQuery自動完成功能和帶有特殊字符圖標的div可以插入搜索框（例如É，ã等）...

每當用戶鍵入-自動完成下拉菜單都會顯示，但是當用戶需要單擊特殊字符圖標（以便將其插入搜索框時）時->自動完成下拉菜單會因為失去焦點而正常關閉：(

在用戶單擊特殊字符圖標之一的情況下，有沒有一種方法可以防止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開發時給定庫或代碼塊沒有良好的公開事件，我會嘗試做的事情（除了嘗試破解/更新源代碼...）是查看html的結構從library / js生成（如果有的話）。

在這種情況下，調用$（“ .combobox”）.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選擇器/方法來獲取我試圖保持打開狀態的正確'ul'標簽。 因此，在獲取要使用jquery的ul之后，我添加了具有'display：block！important;'的class'force-open'。 ，最終迫使jquery組合框保持打開狀態，而與焦點無關。 現在，當您感覺到應該“關閉”組合框時，只需簡單地將類“強制打開”即可。

希望這可以幫助 ：）。