Getting the selected value on autocomplete in Jquery

Question

I added an Autocomplete feature to a form on a HTML template, i would like to perform some actions when an hint is selected, is there any way to do it? I'm using Jquery-Typeahead. Here is my actual code:

$(document).ready(function(){

  // Defining the local dataset
  $.getJSON('http://127.0.0.1:8000/myapi', function(data) {
    console.log(data)

    var dt = data

    $(() => {

      $('#myform').typeahead({
        source: {
          data: dt.results.map(record => record.item)
        },
        callback: {
          onInit: function($el) {
            console.log(`Typeahead initiated on: ${$el.prop('tagName')}#${$el.attr('id')}`);
          },
          onClick: function() {
            console.log(); //How can i console.log() the selected value here, for example?
          }
        }
      });

    });

  });
});

Marko Kacanski · Accepted Answer · 2020-02-19 21:08:21Z

1

Try defining an onClickAfter callback, it's called right after user clicks on an item. Something like this:

onClickAfter: function(node, a, item, event) {
  // item will be the item you selected
  console.log(item);
}

You can also define the onClickBefore callback the same way, and it will be called immediately before "normal" typeahead behaviour kicks in

answered Feb 19, 2020 at 21:08

Marko Kacanski

4339 silver badges17 bronze badges

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

1 Comment

Jack022 Over a year ago

Indeed, it is the right way to go. Thank you a lot Marko!

Collectives™ on Stack Overflow

Getting the selected value on autocomplete in Jquery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related