自動完成所選值 - jQuery的

Question

jQuery代碼：

var prefixes = [{ 
     "name": "Estonia", 
     "dial_code": "+372", 
     "code": "EE" 
     }, { 
     "name": "Latvia", 
     "dial_code": "+371", 
     "code": "LV" 
     }, { 
     "name": "Lithuania", 
     "dial_code": "+370", 
     "code": "LT" 
     }, { 
     "name": "Finland", 
     "dial_code": "+358", 
     "code": "FI" 
     }, { 
     "name": "Sweden", 
     "dial_code": "+46", 
     "code": "SE" 
     }]; 

     prefixes = $.map(prefixes, function(item, i) { 
     return { 
      label: item.name + " " + item.dial_code, 
      value: item.dial_code 
     }; 
     }); 

      $('.js-phone-prefix input').autocomplete({ 
      delay: 0, 
      minLength: 0, 
      source: prefixes, 
      appendTo: $('.js-phone-prefix') 
      }).focus(function() { 
      $(this).autocomplete('search', $(this).val()) 
      }).each(function() { 
      $(this).autocomplete("widget").addClass("phone-prefix"); 
      }); 

HTML代碼：

<div class="js-phone-prefix small" style="position: relative;"> 
    <input type="text" name="prefix" id="prefix" value=""> 
</div> 

什麼我想的是，當用戶選擇從列表中選擇一個我想要設置值作爲輸入值。例如，如果用戶選擇「愛沙尼亞」，則輸入值必須是+372。有什麼建議麼？ link to fiddle

Answer 1

按照documentation，你有當您選擇自動完成選項綁定的事件。

$(".selector").autocomplete({ 
    select: function(e, ui) { 
    // Code will be placed here 
    } 
}); 

因此，在你的榜樣，你必須把它添加到上面的代碼：ui.item.value是你的價值的對象）。

select: function(e, ui) { 
    $(e.target).attr({'value' : ui.item.value}); 
} 

請參閱JSFIDDLE更新

Answer 2

$('.js-phone-prefix input').autocomplete({ 
    //... 

    select: function(event, ui){ 
     $(event.target).val(ui.item.value); 
     console.log($('.ui-autocomplete-input').val()); 
    }, 

    //... 

http://fiddle.jshell.net/6wc5r30h/2/

http://api.jqueryui.com/autocomplete/#event-select