jquery autocomplete canceling focus event

问题

I have an autocomplete, but when I type text to search and move my mouse over autocomplete's results, text in autocomplete changes to previous(removes). Does anyone know how to improve this behaviour.

I read in jQuery.com

focus Type: autocompletefocus

Before focus is moved to an item (not selecting), ui.item refers to the focused item. The default action of focus is to replace the text field's value with the value of the focused item, though only if the focus event was triggered by a keyboard interaction. Canceling this event prevents the value from being updated, but does not prevent the menu item from being focused.

but I don't know how to cancel focus event.

回答1:

You're right, jquery autocpmplete has that bug on they own [demo page][1].
You can get it if you typed some text and autocomplete had showed some answers; then you adding some additional text and at the same time you are hovering on one of the answer the programm will cut your additional text.
You can check source code in autocomplete widget

blur: function (event, ui) {
           // don't set the value of the text field if it's already correct
           // this prevents moving the cursor unnecessarily
           if (self.menu.element.is(":visible") && (self.element.val() !== self.term)){
               self.element.val(self.term);
           }
       }

And you can figure out you problem by commenting out this line self.element.val(self.term); But this is not realy good idea. You can post a bug to jquery!

回答2:

The autocomplete widget of jquery-ui by default does not replace the input text on mouse over. But if you copied the following code found at http://jqueryui.com/demos/autocomplete/#custom-data:

1 $( "#project" ).autocomplete({
2     minLength: 0,
3     source: projects,
4     focus: function( event, ui ) {
5       $( "#project" ).val( ui.item.label );
6       return false;
7     },

that's exactly what you get. If you don't want that behavior, just remove the focus option from lines 4-7.

回答3:

As you have stated in your question, the focus event on jQuery Autocomplete can be canceled. Focus is a function, which the first parameter is a jQuery Event object. As per the Event docs:

Event

... It normalizes the target, relatedTarget, which, metaKey and pageX/Y properties and provides both stopPropagation() and preventDefault() methods.

You can then use the preventDefault() method as so:

$( ".selector" ).autocomplete({
  focus: function( event, ui ) {
    event.preventDefault();
  }
});

回答4:

Canceling an event is done by calling event.preventDefault() (not all events can be canceled, check event.cancelable). https://developer.mozilla.org/en/DOM/event.preventDefault

回答5:

This will set the value to input, removes focus

 $( "#to" ).autocomplete({
    source: availableTags,
    select: function (event, ui) {
    $( "#to" ).val( ui.item.label );
        $('#to').blur();
       return false ;
    }
});

来源：https://stackoverflow.com/questions/11560207/jquery-autocomplete-canceling-focus-event

标签

jquery

jquery-ui

jquery-autocomplete