jQuery - 防止自動完成選擇觸發模糊（）

Question

我試圖防止模糊發生時選擇：在自動完成被調用。 （選擇：在自動完成的建議框中單擊項目時調用） 但是，無意中，從建議框中選擇項目時會調用模糊。 我該如何解決這個問題？

下面是我的代碼基本排隊的方式。

$("#input_field").autocomplete({ 
    source: "source.php", 
    select: function(event, ui) { alert("Item selected! Let's not trigger blur!"); } 
}).blur(function(event) { 
    alert("Alert if the user clicked outside the input, pressed enter, or tab button."); 
    alert("But not from the item selection! :S"); 
}); 

謝謝！

編輯：這是一個簡短的上下文。我試圖讓用戶搜索/選擇一個項目或創建一個新的項目，如果用戶模糊輸入。

Answer 1

自動完成的jQuery UI部件帶有一個「更改」事件，我認爲這是你想做的事情。它被稱爲模糊，除非在用鼠標選擇項目時不調用它。

$("#input_field").autocomplete({ 
    source: "source.php", 
    select: function(event, ui) { alert("Item selected! Let's not trigger blur!"); } 
}); 
$("#input_field").bind('autocompletechange', function(event, ui) { 
    alert("Alert if the user clicked outside the input, pressed enter, or tab button."); 
    alert("But not from the item selection! :S"); 
}); 

Answer 2

使用event.stopPropagation();

$("#input_field").autocomplete({ 
    source: "source.php", 
    select: function(event, ui) { alert("Item selected! let's not trigger blur!"); } 
}).blur(function(event) { 
event.stopPropagation();  
alert("noooooo! blur is still being called!"); 
}); 

，或者你可以同樣的方式使用event.preventDefault() ...

$("#input_field").autocomplete({ 
     source: "source.php", 
     select: function(event, ui) { alert("Item selected! let's not trigger blur!"); } 
    }).blur(function(event) { 
    event.preventDefault(); 
    }); 

參考event.preventDefault

Answer 3

您可能需要獲得更具體的，但它聽起來像是你仍然需要模糊一些blur函數，但您不希望它在初始設置時調用;嘗試像這樣...

$('#input_field').data('ready_to_blur',false) 
    .blur(function(e) { 
     if ($(this).data('ready_to_blur')) 
      return; 
     $(this).data('ready_to_blur',true); 
     event.stopPropagationImmediate(); 
    }) 
    .autocomplete({ 
     source: "source.php", 
     select: function(event, ui) { alert("Item selected! let's not trigger blur!"); } 
    }) 

我也認爲你會想要使用stopPropagationImmediate。請參閱文檔：http://api.jquery.com/event.stopImmediatePropagation/

Answer 4

我不知道如何避免onBlur觸發，但我想我遇到了同樣的問題，並且通過測試onBlur函數中是否打開了自動填充字段來解決此問題。

HTML declaraction

<input id="autocompleteTextbox" type="text" onblur="onBlurFunction();" 
     onkeyup="onKeyUpFunction();" /> 

的Javascript

var autocompleteOpen = false; 
var itemSelected = false; 

$("#autocompleteTextbox").autocomplete({ 

    source: function(request, response) { 
     //Set source. 
    }, 

    select: function(event, ui) { 
     itemSelected = true; 
    }, 

    open: function(event, ui) { 
     autocompleteOpen = true; 
    }, 

    close: function(event, ui) { 
     autocompleteOpen = false; 
     //A selection caused the close. Blur the autocomplete field. 
     if (itemSelected) { 
      document.getElementById("autocompleteTextbox").blur(); 
     } 
    } 
}); 


function onBlurFunction() { 
    if (!autocompleteOpen) { 
     //Do stuff. 
    } 
} 

function onKeyUpFunction() { 
    itemSelected = false; 
} 

這樣，如果自動完成是在開放的onBlurFunction代碼（）將不會運行。 itemSelected用於測試用戶是否在字段中輸入文本或從自動完成列表中選擇了某些內容。在關閉功能中，如果用戶從列表中選擇了某些東西，則模糊該字段。我不知道你的情況是否有道理。

Answer 5

基於我在這裏看到的，我已經把兩個代碼示例放在一起來創建我認爲是答案的東西;這對我來說：

$('#txtCatagory').autocomplete({ source: 'handlers/Catagories.ashx', minLength: 2, 
    change: function (event, ui) { 
     AddTag(event.srcElement.value); 
     $('#txtCatagory').val(''); 
    }, 
    select: function (event, ui) { 
     event.preventDefault(); 
     AddTag(ui.item.value); 
     $('#txtCatagory').val(''); 
    } 
}); 

這裏是我的文本框：

<asp:TextBox runat="server" ID="txtCatagory" ClientIDMode="Static" OnKeyPress="return disableEnterKey(event)" /> 

這裏做的事情對我來說是什麼我在文本框中鍵入傳遞給AddTag功能或任何我從jQuery選擇UI自動完成已通過。但批判地說，它不會傳遞我輸入的任何內容，如果我使用自動完成功能，它會清除該框以準備下一次輸入。

正如您可能已經從函數AddTag的名稱中猜到的那樣，我使用它來標記帖子或產品，但是感謝上面的帖子，我現在設法將自動完成添加到該功能。

Answer 6

觸發一個事件，當用戶從一個文本域模糊顯示他/她一個200px寬和100px高的藍色背景色的小div時，並用粗體文本告訴他「他不應該離開這個字段空白「

Answer 7

這個問題的一個非常簡單的解決方案。

顯示下拉列表時取消綁定模糊事件處理程序， 並在選擇後再次綁定模糊事件處理程序。

添加兩個事件自動完成初始化時

displaydropdowncallback: function(){ $("#AUTOTEXT").unbind("blur"); }, 
selectdatacallback: function (data) { 
    $("#AUTOTEXT").blur(validatepostcode); 
} 

修改jquery的自動完成源碼：

添加代碼 options.displaydropdowncallback（）;

下

show: function() { 
    var offset = $(input).offset(); 

加入 options.selectdatacallback（selected.data）;

下

function selectCurrent() { 
     var selected = select.selected(); 

     if (!selected) 
      return false;