onSelect option/function

[gravitymediallc]

Hello, I cannot find in your documentation how to handle the onSelect adding of the selection to the fiend when writing a custom function.

For example, in my case, I have an array with objects, and each object has an id, and a name property.

I used the renderItem property/function to create an auto-suggestion div which has data-id and data-name attributes.

Once the suggestion is selected, the function should put the selection's data-name property value as the value of the auto-suggest field, but also, it should change the data-id property of the auto-suggest field to put the item.id property.

The issue is that once I make my own onSelect function, the field no longer gets updated onSelect.

[tymothytym]

You can edit the plugin to pass the input element to the onSelect function ("this" is stored in the variable "that"):

In jquery.auto-complete.js

line 77:

o.onSelect(e, v, item);

to

o.onSelect(e, v, item, that);

line 127:

if (sel.length && that.sc.is(':visible')) { o.onSelect(e, sel.data('val'), sel); setTimeout(function(){ that.sc.hide(); }, 20); }

to

if (sel.length && that.sc.is(':visible')) { o.onSelect(e, sel.data('val'), sel, that); setTimeout(function(){ that.sc.hide(); }, 20); }

line 169:

onSelect: function(e, term, item){}

to

onSelect: function(e, term, item, that){}

You can then get the input element id or a data attribute via standard jQuery:

e.g.

onSelect: function(event, term, item, that) {
    // the input's id
    console.log('this id = ', that.attr('id'));
    // set "data-id" on the input to the id of the selected item
    that.attr('data-id', item.attr('id'));
 }