How do I get the value from a YUI Autocomplete?

I'm at a loss for how to do something extremely simple: Get the current value of a AutoComplete YUI3 widget. I have the following markup:

<label for="targets">Target:</label>
<input开发者_如何学运维 id="targets" type="text"></input>
<label for="packets">Packet:</label>
<input id="packets"></input>

I have the following Javascript:

YUI().use("autocomplete", function(Y) {
  Y.one('body').addClass('yui3-skin-sam');
  var tgt = new Y.AutoComplete({
    inputNode: '#targets',
    source: '/telemetry/targets?target={query}',
    render: true
  })
  var pkt = new Y.AutoComplete({
    inputNode: '#packets',
    source: '/telemetry/packets?target='+tgt.get('value')+',packet={query}',
    render: true
  })
});

tgt.get('value') always returns an empty string no matter what I have typed into the #targets input. What am I doing wrong?

tgt.get('value') is the right way to get the current value of the inputNode, but in this case it's being called immediately when the value of the source attribute is set at instantiation, not when the request is made later. Since no text has been entered at this point, the value is empty.

If you want the "target" parameter of the second AutoComplete instance to be set to the current value of the first AutoComplete instance's inputNode, the best thing to do would be to set a custom requestTemplate for the pkt instance:

var pkt = new Y.AutoComplete({
  inputNode: '#packets',
  source: '/telemetry/packets',
  requestTemplate: function () {
    return '?query=' + encodeURIComponent(pkt.get('query')) +
        '&target=' + encodeURIComponent(tgt.get('value'));
  },
  render: true
});

This will ensure that the query string of each request is generated at request time rather than at instantiation time.