2009-05-17 46 views
1

下面的代碼非常簡單。我有一個jQuery autocomplete綁定到由#search引用的html文本輸入。當用戶輸入內容時,退出列表顯示來自服務器的建議。如果用戶點擊其中一個建議,或者按下回車鍵並選擇該選項,則會彈出一個彈出窗口(facebox),顯示彈出窗口中的被呼叫頁面。如果用戶只是想執行正常搜索而不選擇建議,則可以通過按Enter鍵或單擊#searchButton來完成。換句話說:如何防止以後綁定的jQuery autocompleter發射?

  1. 用戶在例如 葡萄柚
  2. 出現可選建議。
  3. 情景1:用戶選擇 建議用鼠標或鍵盤, 按下回車,或者單擊它 - 導致該 項,彈出,即自動完成的 結果.handler火災(而不是 .keypress)
  4. 方案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(); 
      } 
     } 
    } 

回答

3

您是否嘗試過在搜索框中取消綁定按鍵事件並重新綁定自己的按鍵處理程序?

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 }); 
}); 

jQuery("#search").unbind("keypress").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(); 
}); 

也可能是在自動完成處理程序中正在處理其他關鍵事件。我認爲你想從文本輸入中刪除所有這些文件,而將它們留在自動完成「列表」上。如果由自動完成處理的事件與按鍵不同,則可能需要將其移除。

+0

+1並打勾。你讓我走在正確的軌道上。我通過在結果處理程序中放置jQuery('#searchButton')。attr('disabled',true)來修復它,從而防止調用.result之後#searchButton上的關鍵事件被觸發:D謝謝! – karim79 2009-05-17 23:17:00

-1

在javascript中,你可以簡單地說:

return false; 

你的事件處理函數,以進一步冒泡停止活動。

+0

感謝Soviut,之前嘗試過,只是再次嘗試過,沒有喜悅不幸。 – karim79 2009-05-17 22:41:35