How can I prevent subsequent binding to jQuery autocomplete?
This code is very simple. I have a jQuery autocomplete associated with html text input being referenced #search
. When the user enters something into it, suggestions from the server are displayed in the dropdown list. If the user clicks on one of the sentences or presses Enter, he selects a pop-up window (facebox) that displays the invoked page in a pop-up window. If instead the user just wants to perform a normal search rather than select a sentence, they can do so by pressing Enter or by hitting #searchButton
. In other words:
- User enters something into eg. grapefruit
- Favorite offers appear.
- Scenario 1: The user selects a sentence with the mouse or keyboard, typing or clicking on it, which causes the item to pop up, i.e. autocomplete result. .keypress)
- Scenario 2: The user is not interested in the suggestions and instead clicks on enter OR click on
#searchButton
to perform a full search on what he typed in#search
. The autocomplete of the result handler does not fire, instead either Enter or the key press fires the#searchButton
click event , or it fires directly (i.e. actually pressed), thus triggering a normal search.
This works fine in IE6, IE7, IE8, Chrome, Safari, but NOT firefox.
In firefox, when Enter is pressed on a sentence, both the result handler and keypress events fire, giving the user a facebox popup as well as performing a full search. I thought I would somehow stop .keypress
from shooting if. result
fires will do the trick, however I was unable to figure out how to do it. I tried to use jQuery stopPropogation()
and stopImmediatePropogation()
handler .result, hoping that it will prevent the launch .keypress, but nothing changed.
If anyone has any thoughts or would like to help me with this, I would be very grateful.
Thanks in advance!
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();
}
}
}
a source to share
Have you tried canceling the keypress event in the search box only and re-creating your own keypress handler?
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();
});
It could also be that there are other key events that are handled instead in the autocomplete handler. I would think that you would want to remove all of them from text input, leaving them in the autocomplete list. If the events handled by autocomplete differ from the key press, you can remove them.
a source to share