CODEWITHSUNDEEP
jqueryjquery-uijquery-autocomplete
Rinat
Rinat

Reputation: 598

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.

Upvotes: 1

Views: 4899

Answers (5)

Vim
Vim

Reputation: 578

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

Upvotes: 0

daYooper
daYooper

Reputation: 84

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

Upvotes: 3

Vadim Ivanov
Vadim Ivanov

Reputation: 633

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!

Upvotes: 1

bratface
bratface

Reputation: 76

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.

Upvotes: 1

Ilod
Ilod

Reputation: 146

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

Upvotes: 0

Related Questions