jquery - jQuery UI 自动完成将输入值复制到另一个输入

Question

我正在尝试将输入值从 JQUI 自动完成复制到另一个输入，该输入也启用了自动完成功能。

这是我在 HTML 中的内容

<label for="LocationFrom">Location</label> <input id="LocationFrom" />
<label for="LocationTo">Location</label> <input id="LocationTo" />

和JS

$(function() {
$('#LocationFrom, #LocationTo').autocomplete({
    source: [
    "airport",
    "downtown",
    "street",
    "city"
            ],
    minLength: 0
})
.focus(function()
{
var self = this;

window.setTimeout(function()
{
if (self.value.length == 0)
  $(self).autocomplete('search', '');
});})}); 

我试过这个，但它不起作用

$('#LocationFrom').change(function() {
$('#LocationTo').val($(this).val());
});

这是小提琴

tnx

Answer 1

似乎 jquery 自动完成不会触发“onchange”事件；您可以使用自动完成更改事件来解决此问题。

$(function () {
$('#LocationFrom, #LocationTo').autocomplete({
    source : [
        "airport",
        "downtown",
        "street",
        "city"
    ],
    minLength : 0,
    change : function () {
        $('#LocationTo').val($(this).val());
    }
})
.focus(function () {
    var self = this;

    window.setTimeout(function () {
        if (self.value.length == 0)
            $(self).autocomplete('search', '');
    });
})});

Answer 2

请使用选择事件。

我更新了小提琴供您参考。

http://jsfiddle.net/AknyR/16/

$(function() {
    $('#LocationFrom, #LocationTo').autocomplete({
        source: [
        "airport",
        "downtown",
        "street",
        "city"
                ],
        minLength: 0,
        select: function( event, ui ) {

            $('#LocationTo').val(ui.item.value);
           $('#LocationFrom').val('');
            return false;
}
    })
    .focus(function()
    {
  var self = this;

  window.setTimeout(function()
  {
    if (self.value.length == 0)
      $(self).autocomplete('search', '');
  });

})

$('#LocationFrom').change(function() {
$('#LocationTo').val($(this).val());
});

});