jquery autocomplete - 防止關閉它當點擊外部div？

所以 - jQuery的自動完成功能和額外的div用特殊字符圖標可以插入一個搜索框（如E，A等）...jquery autocomplete - 防止關閉它當點擊外部div？

每當用戶類型 - 自動完成下拉列表顯示出來，但是當用戶需要點擊一個特殊的字符圖標（所以它會插入到一個搜索框） - >自動完成下拉可預測地關閉，因爲焦點已經丟失:(

有沒有一種方法來防止jquery自動完成下拉式隱藏在失去焦點的情況下用戶點擊其中一個特殊圖標？

2013-06-18 agent_smith

編輯：這是針對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"); 
}) 
});

說明：

通常我嘗試做，如果有一個給定的庫或代碼塊沒有很好的暴露事件做網站開發（其它時候不是試圖在破解/更新源代碼...）查看從庫/ js生成的html結構（如果有的話）。

在這種情況下，調用$（「.combobox」）.combobox之後，從jQuery的用戶界面生成的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'標記，我試圖保持打開狀態。所以當我抓住ul我想要使用jquery後，我添加了'顯示：block！important'的Class'force-open'。，最終迫使jquery組合框保持打開狀態，不管焦點如何。現在，只要您覺得現在是關閉組合框的時間，就可以簡單地移除Class'force-open'。

希望這有助於:)。

來源

2013-09-08 20:14:57 mkralla11

jquery autocomplete - 防止關閉它當點擊外部div？

回答

相關問題