CODEWITHSUNDEEP
javascriptjqueryjquery-uiautocomplete
Abigail Hardin
Abigail Hardin

Reputation: 167

jQuery Autocomplete - don't fill text input until selected (mouse or enter)

I am using a jQuery autocomplete that connects to a database. Right now if you start typing a term and move your mouse over the populated list the text input with the original term does not change until you click on a list item.

I want the same thing to happen with the keyboard. Don't fill the text box when typing the down arrow. Fill the text box and hidden id at the same time with either enter or mouse click

$(function() {
    function log( message ) {
        $(".userBookProjId").val(message);
        $(".userBookProjId").scrollTop( 0 );
    }
    $( ".userBookProj" ).autocomplete({
        source: "userBookProj.php?userId=" + $('#userId').val(),
        minLength: 2,//search after two characters
        select: function( event, ui ) {

            log( ui.item ? ui.item.id : "");
        }
    });
});

Any help is greatly appreciated!

Upvotes: 1

Views: 952

Answers (1)

Twisty
Twisty

Reputation: 30883

You will want to use the focus event.

$(function() {
  function log( message ) {
    $(".userBookProjId").val(message);
    $(".userBookProjId").scrollTop( 0 );
  }
  $( ".userBookProj" ).autocomplete({
    source: "userBookProj.php?userId=" + $('#userId').val(),
    minLength: 2,
    focus: function(){
      return false;
    },
    select: function( event, ui ) {
      log( ui.item ? ui.item.id : "");
    }
  });
});

focus( event, ui )

Type: autocompletefocus

Triggered when focus is moved to an item (not selecting). The default action is to replace the text field's value with the value of the focused item, though only if the 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.

See More: http://api.jqueryui.com/autocomplete/

Hope that helps.

Upvotes: 2

Related Questions