jQuery UI自動完成將輸入值複製到另一個輸入

我試圖將輸入值從JQUI自動完成複製到另一個輸入，該輸入也啓用了自動完成功能。jQuery UI自動完成將輸入值複製到另一個輸入

下面是我在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()); 
});

這裏的fiddle

tnx

來源

2013-07-25 teva

看來，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', ''); 
    }); 
})});

來源

2013-07-25 09:36:27

這工作正常，但我不想爲新輸入添加值而不必從第一個字段中刪除焦點。就像Gautam建議的那樣。 – teva

您可以使用close事件而不是change.By使用close時，只要自動填充建議列表關閉而不需要從第一個字段中移除焦點，第二個值就會更新。我希望它有幫助。 –

太棒了...這正是我需要的。謝謝！ – teva

請使用select事件。

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

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

});

來源

2013-07-25 09:32:12 Gautam

這很好，但是如果稍後手動更改輸入2，您是否可以禁用更改輸入1。現在，如果我選擇輸入1，輸入2具有相同的值，但如果我不想更改輸入2，則此值也會在輸入1中更改。 – teva

我更新jsfiddle請通過http://jsfiddle.net/AknyR/19/ – Gautam

我更新了腳本以及在我的回答中 – Gautam

jQuery UI自動完成將輸入值複製到另一個輸入

回答

相關問題