下面的代碼非常簡單。我有一個jQuery autocomplete綁定到由#search
引用的html文本輸入。當用戶輸入內容時,退出列表顯示來自服務器的建議。如果用戶點擊其中一個建議,或者按下回車鍵並選擇該選項,則會彈出一個彈出窗口(facebox),顯示彈出窗口中的被呼叫頁面。如果用戶只是想執行正常搜索而不選擇建議,則可以通過按Enter鍵或單擊#searchButton
來完成。換句話說:如何防止以後綁定的jQuery autocompleter發射?
- 用戶在例如 葡萄柚
- 出現可選建議。
- 情景1:用戶選擇 建議用鼠標或鍵盤, 按下回車,或者單擊它 - 導致該 項,彈出,即自動完成的 結果.handler火災(而不是 .keypress)
- 方案2:用戶對建議中的 不感興趣,而是按 輸入或點擊
#searchButton
來執行完全搜索,輸入他輸入的內容#search
。自動完成的結果處理程序不會觸發,而是按Enter鍵觸發#searchButton
的單擊事件,或者直接觸發(即實際單擊),從而觸發正常搜索。
這在IE6,IE7,IE8,Chrome瀏覽器,Safari瀏覽器,但不是在Firefox中的作品非常漂亮。
在firefox中,當在建議按下Enter時,結果處理程序和按鍵事件都會觸發,從而爲用戶提供了facebox彈出窗口,以及執行完整搜索。我認爲,不知何故停止.keypress
如果。 result
火災會訣竅,但是,我一直無法弄清楚如何去做。我試圖把jQuery的stopPropogation()
和stopImmediatePropogation()
放到.result處理程序中,希望它能防止.keypress被觸發,但它沒有改變任何事情。
如果有人有任何想法,或想通過這個幫助我,我會非常感激。
提前致謝!
jQuery("#search").autocomplete("/index/suggest", {
selectFirst: false,
formatItem: function(data, i, n, value) {
return "<font color='#3399CC'>" + value.split("::")[0] + "</font>";
},
formatResult: function(data,value) {
return value.split("::")[0];
}
}).result(function(event, data, formatted) {
alert('Hello, someone selected a suggestion by clicking on it or pressing enter on it, so you\'re getting this!');
var pieces = formatted.split("::");
var url = '/' + pieces[1] + '/detail/?id=' + pieces[2];
jQuery.facebox({ ajax: url });
}).keypress(keypressHandler).blur(function() {
alert('I don\'t want this to appear if .result above is called, and it doesnt, except in firefox! Bah!');
jQuery(this).flushCache();
});
function keypressHandler(e)
{
if(e.which == 13) {
if(!jQuery('#searchButton').is(':disabled')) {
jQuery(this).blur();
jQuery('#searchButton').focus().click();
}
}
}
+1並打勾。你讓我走在正確的軌道上。我通過在結果處理程序中放置jQuery('#searchButton')。attr('disabled',true)來修復它,從而防止調用.result之後#searchButton上的關鍵事件被觸發:D謝謝! – karim79 2009-05-17 23:17:00