JQuery UI自動完成 - 在hiting後隱藏列表輸入

我有一個輸入。我使用Jquery UI自動完成向用戶提出建議。讓我在我的列表中有3個項目的圖像：item1，item2，item3。我正在尋找的是當用戶輸入時要關閉的列表。例如，如果用戶只輸入「it」，則將顯示全部3個元素。在那種情況下，如果他輸入，我希望列表被關閉。我無法爲此提供解決方案。希望有人能幫忙。乾杯。馬克。JQuery UI自動完成 - 在hiting後隱藏列表輸入

http://jsfiddle.net/vXMDR/

我的HTML：

<input id="search" type="input" />

我的JS：

$(function() { 

    var availableTags = [ 
      "item1","item2","item3" 
     ]; 

    $("#search").autocomplete({ 
     source:availableTags, 
     minLength: 0 
     }); 
});

來源

2012-03-07 Marc

$(function() { 

    var availableTags = [ 
      "item1","item2","item3" 
     ]; 

    $("#search").autocomplete({ 
     source:availableTags, 
     minLength: 0 
    }).keyup(function (e) { 
     if(e.which === 13) { 
      $(".ui-menu-item").hide(); 
     }    
    }); 
});

http://jsfiddle.net/vXMDR/2/

來源

2012-03-07 13:32:58 karim79

在我真實的情況下，我已經有一個keyup事件可以過濾我的頁面上的表格。我想這個解決方案是相互矛盾的......父母的電子郵件是什麼？ – Marc 2012-03-07 13:48:05

嗯，我不知道爲什麼你會隱藏該項目，而不是隻調用明確的'close'方法 - http://docs.jquery.com/UI/Autocomplete#method-close – shanabus 2012-03-07 14:02:21

OHHHHH！我知道了！ e是關鍵代碼... 13是輸入鍵的代碼...我的理解是否正確？ – Marc 2012-03-07 14:04:59

這裏是解決方案：http://jsfiddle.net/vXMDR/3/

如果您有任何疑問，請告知我。

神奇的是結合自動完成靠近方法按鍵

$("#search").keypress(function(e){ 
    if (!e) e = window.event; 
    if (e.keyCode == '13'){ 
     $('#search').autocomplete('close'); 
     return false; 
    } 
    });

UPDATE

$("#search").keypress(function(e){結合＃搜尋元素中指定的功能的按鍵，傳入event對象。您也可以將其寫爲$("#search").on('keypress', function(e) {...

if (!e) e = window.event;確保如果未傳入有效事件，則會將e設置爲當前window.event對象。

最後，if (e.keyCode == '13'){測試事件鍵碼值等於'enter'鍵。有關有效鍵碼的列表，see here。

下面是自動完成接近方法的文檔 - http://docs.jquery.com/UI/Autocomplete#method-close

來源

2012-03-07 13:34:25 shanabus

當然@Marc。我將更新與評論 – shanabus 2012-03-07 14:09:15

答案不需要我得到它。非常感謝您的幫助.... – Marc 2012-03-07 14:10:44

好的，但要注意接受的答案，'hide（）'元素與關閉自動填充功能的方式不同。 – shanabus 2012-03-07 14:16:51

我已修改shanabus溶液進一步，以允許的時間延遲由於回調。

http://jsfiddle.net/vXMDR/46/

這是一個簡單的黑客來存儲是否要顯示該自動完成作爲布爾值。（我用的setTimeout創建那裏有一個等待的情況下，這是問題的方案不是解決辦法。）

shouldComplete = true; 

$("#search").autocomplete({ 
    source:function (request, response) {    
     setTimeout(
      function() { 
       response(shouldComplete ? availableTags : null); 
      }, 
      2000); 
    }   
    , 
    minLength: 0 
    });

然後，當輸入按鈕被按下的標誌被設置爲false。任何其他密鑰都會重新激活該標誌。

$("#search").keypress(function(e){ 
    if (!e) e = window.event; 
    if (e.keyCode == '13'){ 
     $('#search').autocomplete('close'); 
     shouldComplete = false; 
     return false; 
    } 
     else 
     { 
      shouldComplete = true; 
     } 
    });

我相信這樣做可能更優雅，但是這確實解決了下拉菜單稍後可能出現的問題。

來源

2013-09-22 19:09:21

-1

我遇到了這個問題，無法使用close（）方法，因爲我的自動完成是在每次加載Backbone視圖時重新呈現的。因此，一個新的自動完成元素被附加到DOM，即使附加的輸入元素被吹走並被重新創建，這些元素也會被卡住。多餘的自動完成功能元素都造成了一些問題，但最糟糕的是，當按下用戶輸入的速度不夠快，我會去通過這個序列：

用戶類型的文本
請給建議，開始執行
的按鍵事件被觸發並且執行全文搜索（用戶沒有從自動完成中選擇某些東西）
視圖重新加載，輸入字段和其他元素被重新呈現，並且新的自動完成元素被附加到DOM的末尾
ori對建議的金索取請求返回並顯示響應。

請注意，步驟5中顯示的建議現在綁定到不再與我的輸入字段關聯的自動填充容器，因此任何事件（例如按Esc或單擊屏幕上的其他位置都不會執行任何操作）。建議卡在那裏，直到頁面完全重新加載。

我最終通過存儲最近創建的自動完成元素的mainContainerId並手動刪除它來解決此問題。

// during rendering 
self.currentAutoComplete = $("#input-element").autocomplete({ 
    // set options 
}); 

// later 
if (this.currentAutoComplete) { 
    $("#" + this.currentAutoComplete.mainContainerId).remove(); 
}

來源

2013-09-25 15:28:32 Sean

JQuery UI自動完成 - 在hiting後隱藏列表輸入

回答

相關問題