Bootstrap-3-typeahead: How to change focus to another input after selected item into dropdownlist?

Question

I'm using Bootstrap 3 Typeahead 4.0.2 and i would like to know how can i change Typeahead input focus to another input text after i select one item inside list? I found some similar questions but i didn't find the correct way to solve this:

1. Angularjs ui typeahead to focus after select
2. Focus on other input after typeahead-on-select angular-ui-bootstrap
3. How to get Bootstrap typeahead click result before the input change event

When i select some item inside input text, the focus keep on this input text but i would like to change this focus to next input text after i select an item. Below are the html code and bootstap typeahead that i'm using:

HTML

<input type="text" name="products" id="products" data-provide="typeahead" class="form-control typeahead" autocomplete="off" placeholder="Type something" />

<input type="text" name="price" id="price" placeholder="Type price" />

Bootstrap 3 Typeahead

            $('#products').typeahead({ 

                source: function ( query, result )  

                {
                    result ( $.map(data, function (item)
                        {
                            return item.product;
                        }
                    ));

                },

                  afterSelect: function(data) {

   $('#price').focus();

  },    

    });

As the Typeahead code above, i tryed to insert jquery focus event $('#price').focus(); inside Typeahead afterSelect event but not working. In this case, how can i solve this?

Answer 1

I found an answer in this link. I just insert the code below inside Typeahead afterSelect event:

setTimeout("$('#price').focus();", 0)

The code above works well but i don't know why setTimeout has a function to changed focus when i select an item inside list. Anyway, it worked for me :p