2

I'm using jQuery UI 1.12. I have an input field that I turn into an autocomplete select using the code

$("#myFilter").autocomplete({source: myItems});

I then auto-select an item upon initialization using

$("#myFilter").autocomplete("search", defaultValue);

My question is, how do I get the selected ID of the item that's selected? If I were in an "onchange" event, I could do

$( "#myFilter" ).on( "autocompleteselect", function( event, ui ) {

    var id = ui.item.value;

However, I am not in the onchange event, and as such I'm not sure how to extract the selected value.

Dave
  • 15,639
  • 133
  • 442
  • 830
  • Not familiar with autocomplete, it's not pretty but you could manually kick of an onchange event with jQuery. – Mark Baijens Jul 03 '18 at 14:22
  • How exactly do you select the item? The search method is not enough... it is supposed to pop-open the suggestion list. The user still has to use arrow keys and press enter. E.g. if the source is `["ActionScript", "Java", "JavaScript"]` and you call `$("#myFilter").autocomplete("search", "Java")` it will pop-open the suggestion list containing `Java` and `JavaScript` but it will not select the item. – Salman A Jul 05 '18 at 09:18
  • You mentioned you *I am not in the onchange event*, what event are you in? Can you provide more details about what you are trying to do? – Twisty Jul 05 '18 at 18:14
  • Hope you looked at my answer. – Vignesh Raja Jul 06 '18 at 05:43

2 Answers2

3

The widget factory stores its internal data against a jquery data attribute called "ui<Widgetname>". For the autocomplete widget it's uiAutocomplete. The selected item is stored as selectedItem (by default this is a plain object containing label and value keys, but it can be changed via the source and render methods to hold more data if you need it). So you can do:

$("#myFilter").data("uiAutocomplete").selectedItem.label

or

$("#myFilter").data("uiAutocomplete").selectedItem.value

Here's a jsfiddle example based on the usage doc: http://jsfiddle.net/xt6482wm/3/

blgt
  • 8,135
  • 1
  • 25
  • 28
0

The value can be accessed via several methods.

Method 1: As the autocomplete is constructed on an input element, the value can be fetched directly from the jQuery object of the element.

Method 2: jQuery construction returns an array with first value pointing to the DOM of the element. Hence accessed from DOM using value.

Method 3: The jQuery appends its custom data in the wrapper of the element. All the options, defaults and methods are defined in an object and the same is assigned to the ui-autocomplete/uiAutocomplete key. Both can be used to access the data. As dashed-attributes are internally converted to camelCased. MDN Docs for reference 

var options = ["Tamil","English","Spanish","Italian","French"];

$("#lang").autocomplete({source:options});

function getValue()
{
    console.log("Using method 1 : "+$("#lang").val());
    console.log("Using method 2 : "+$("#lang")[0].value);
    console.log("Using method 3 : "+$("#lang").data("ui-autocomplete").selectedItem.value);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<input id="lang">
<button onclick="getValue()">Get Selected Value</button>
Vignesh Raja
  • 7,927
  • 1
  • 33
  • 42
  • Regarding (3), AFAIK these are actually two different things. jQueryUI does **not** use the DOM dataset, but stores everything as a jQuery data property, which are keyed against the jQuery.cache object. See this question: https://stackoverflow.com/questions/5821520/where-is-jquery-data-stored/ – blgt Jul 07 '18 at 18:50