如何从YUI自动填充中获取值?

时间:2011-01-28 18:50:46

标签: autocomplete yui

我对如何做一些非常简单的事情感到茫然:获取AutoComplete YUI3小部件的当前值。我有以下标记:

<label for="targets">Target:</label>
<input id="targets" type="text"></input>
<label for="packets">Packet:</label>
<input id="packets"></input>

我有以下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')总是返回一个空字符串,无论我输入#targets输入是什么。我做错了什么?

1 个答案:

答案 0 :(得分:4)

tgt.get('value')是获取inputNode的当前值的正确方法,但在这种情况下,当在实例化时设置source属性的值时立即调用它,而不是在稍后发出请求时。由于此时未输入任何文本,因此该值为空。

如果希望将第二个AutoComplete实例的“target”参数设置为第一个AutoComplete实例的inputNode的当前值,那么最好的做法是为pkt实例设置自定义requestTemplate :

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
});

这将确保每个请求的查询字符串是在请求时而不是在实例化时生成的。