jQuery UI自動完成：在輸入時選擇自定義項目

我有一個與自動完成綁定的文本框。當輸入框的文本包含某些字符時，我還將自定義元素添加到自動完成下拉列表中。我加入這個自定義元素自定義插件的_renderItem功能：jQuery UI自動完成：在輸入時選擇自定義項目

$tb.autocomplete({ 
    /* OPTIONS HERE */ 
}).data("autocomplete")._renderItem = function (ul, item) { 
    if ($tb.val().indexOf('someText') > -1){ 
    ul.append('<li class="dropdown-element"><a href="#" class="my-option">My custom option</a></li>'); 
    } 
    return false; 
}

我想，只要用戶類型的東西，包含「someText」和按下Enter鍵（無前的下拉列表中選擇任何東西），該爲我的自定義元素引發了自動完成的「select」事件。

我試着在文本框中爲'keyup'事件添加一個處理程序，但每次按下回車鍵時都會調用該處理程序（即使在下拉列表中選擇了某個元素），我也無法取消該事件的傳播來自自動完成的'select'事件處理程序。（我嘗試過e.stopPropagation和e.originalEvent.stopPropagation，但它仍然被'keyup'處理程序處理）。

有關如何實現此目的的任何想法？感謝

來源

2012-07-14 willvv

如何採取有someText作爲一個有效的選項，通過open事件刪除它，如果用戶沒有輸入的整個事情的方法，但隨後離開它，如果他們有 - http://jsfiddle.net/tj_vantoll/bgstB/。

這種方法唯一的問題是，如果您需要在用戶輸入類似foo bar someText之類的名稱時調用該事件，則不會調用open事件。

來源

2012-07-15 10:52:46

問題不在於添加或不添加元素，我想要做的是在用戶未選擇下拉列表中的某個項目（自定義項目或其中一個默認項目）時處理「Enter」）。 – willvv 2012-07-15 16:58:43

好吧，我花了一段時間才能找到解決的辦法，但在這裏它是：

var autocomplete = $tb.autocomplete({ 
    /* OPTIONS HERE */ 
    select:function(e, ui){ 
    // The 'autocompleteselected' event wraps a 'menuselected' event that wraps a 'keydown' event 
    // we stop the propagation of this event to prevent the event handler of keydown from processing the enter when an item was selected by that enter 
    event.originalEvent.originalEvent.stopPropagation(); 

    ProcessSelectedElement(ui); 
    } 
}); 
autocomplete.data("autocomplete")._renderItem = function (ul, item) { 
    if ($tb.val().indexOf('someText') > -1){ 
    ul.append('<li class="dropdown-element"><a href="#" class="my-option">My custom option</a></li>'); 
    } 
    return false; 
} 

autocomplete.keydown(function(e){ 
    if (e.keyCode == 13 && !e.isPropagationStopped() && tb.val().indexOf('someText') > -1) { 
     ProcessCustomElement(); 
    } 
});

基本上我做的是停止原來的keydown事件的傳播時，該事件選擇現有的項目之一。在keydown事件處理程序中，我只是驗證該事件的傳播尚未停止並相應地處理輸入。

可能的問題可能是由於某種原因，keydown的事件處理程序在'autocompleteselected'事件處理程序之前執行，在這種情況下，事件傳播將不會停止，但是我所做的測試不會' t顯示這個問題。

來源

2012-07-15 16:57:41 willvv

jQuery UI自動完成：在輸入時選擇自定義項目

回答

相關問題