автозаполнения выбранное значение - 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