jquery autocomplete to fill in another field

Question

I'm using autocomplete on one input field to fill in another:

<input id='fruit' name='fruit' type='text'>
<input id='details' name='details' type='text'>

jQuery code:

var x = ["apple", "kiwi", "lemon"];

$( "#fruit" ).autocomplete({
     source: x
});

jQuery(document).on("change","#fruit", function()
{
    $.each(x, function(key, value) {

        switch(value) {
            case "apple":
                $('#details').val("Delicious");
                break;
            case "kiwi":
                $('#details').val("Yummy");
                break;
            case "lemon":
                $('#details').val("Sour");

        }
    });
});

When someone selects apple, kiwi or lemon with the autocomplete then it fills out the other input field with the corresponding text.

I have two issues:

Currently it always prints out "Sour"
When you select an entry from the autocomplete you have to click away again to fill out the field. Is there a way to do this when someone selects a choice from autocomplete?

Here is a fiddle

stefanz · Accepted Answer · 2013-06-19 22:20:53Z

6

I guess you get things bit hard using switch. If you take a look over ui documentaton you will see that you can use array of objects. If i were you i would put the source like this :

var x = [
    { label : 'apple', value : 'Delicious' },
    { label : 'kiwi', value : 'Yummy' },
    { label : 'kiwiooo', value : 'aaa' },
    { label :  'lemon', value : 'Sour' }
];

Now you know that for a certain label you have a certain value, without using switch and other stuff, so the rest of code will looks like

$( "#fruit" ).autocomplete({
    source: x,
    focus : function(){ return false; }
})
.on( 'autocompleteresponse autocompleteselect', function( e, ui ){
  var t = $(this),
      details = $('#details'),
      label = ( e.type == 'autocompleteresponse' ? ui.content[0].label :  ui.item.label ),
      value = ( e.type == 'autocompleteresponse' ? ui.content[0].value : ui.item.value );

  t.val( label );
  details.val( value );

  return false;
});

I put return false on focus because if the user choose to slide down on list with keyboard arrows, in #fruit input will appear the value and this is not ok.

You can play with stuff right here

answered Jun 19, 2013 at 22:20

stefanz

1,32713 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tom Over a year ago

I like the idea of using an array of objects. However the advantage of a switch statement is that I can use case: apple case: lemon in one line with one value. I have many cases of this. Is there a way to do this other than duplicating the value in the array of objects.

Tom Over a year ago

I ended up using this. I removed autocompleteresponse as one of the selectors as you get strange behavior otherwise.

jimbo · Accepted Answer · 2013-06-19 21:38:05Z

0

You don't need or want the each loop inside the change handler. Just use the value of your input.

$(document).on("change","#fruit", function()
{
    switch($('#fruit').val()) {
        case "apple":
            $('#details').val("Delicious");
            break;
        case "kiwi":
            $('#details').val("Yummy");
            break;
        case "lemon":
            $('#details').val("Sour");

    }
});

This code could be improved by not performing the $('#fruit') on each invocation of the handler, but it'll solve your problem.

answered Jun 19, 2013 at 21:38

jimbo

11.1k6 gold badges32 silver badges47 bronze badges

Comments

salim · Accepted Answer · 2013-06-19 22:12:39Z

0

You can use autocomplete's change:

$('#fruits').autoceomplete({ source: x,
change: function (event, ui) {
        switch(ui.item){
              case 'apple': break;
              case 'kiwi': break;
        }
}})

answered Jun 19, 2013 at 22:12

salim

1

1 Comment

Tom Over a year ago

Seems simple but that doesn't work (even if I fix the obvious errors)

Collectives™ on Stack Overflow

jquery autocomplete to fill in another field

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related