JQuery автозаполнение источник в зависимости от различных входного

Question

решения для всего 2 опций размещено здесь @VinayC:
jQuery UI - Autocomplete source dependent from selected option in different input

Но мне нужно решение для более чем двух вариантов в моем выборе?
код здесь: http://jsbin.com/fakuwohupa/edit?html,js,output

<select id="country"> 
    <option value="">Choice one</option> 
    <option value="1">US</option> 
    <option value="2">UK</option> 
    <option value="3">GR</option> 
    <option value="4">IT</option> 
</select> 
<form id="aspnetForm" action="" method="post"> 
    Type "A" to test:<input type="text" id="city" > 
</form> 

$(function() { 
    var US = [ "City1", "City2", "City3" ]; 
    var UK = [ "UK_City1", "UK_City2", "UK_City3" ]; 
    var GR = [ "Gr_City1", "Gr_City2", "Gr_City3" ]; 
    var IT = [ "It_City1", "It_City2", "It_City3" ]; 

    $('#country').change(function() { 
     var src = $('#country').val() == '1' ? US : UK; 
     $("#city").autocomplete('option', 'source', src); 
    }); 

    $("#city").autocomplete({ 
     source: [] 
    }); 
}); 

Спасибо

Answer 1

$(function() { 
 
    var sources = { 
 
     US : [ "City1", "City2", "City3" ], 
 
     UK : [ "UK_City1", "UK_City2", "UK_City3" ], 
 
     GR : [ "Gr_City1", "Gr_City2", "Gr_City3" ], 
 
     IT : [ "It_City1", "It_City2", "It_City3" ] 
 
    } 
 
    
 
    var $city = $("#city").autocomplete({ 
 
      source: [] 
 
     }); 
 
    
 
    $('#country').change(function() { 
 
      $("#city").val(''); 
 
      var src = $(this).find("option:selected").text(); 
 
      $city.autocomplete('option', 'source', sources[src]); 
 
     }); 
 
     
 
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script> 
 
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> 
 
    
 
<select id="country"> 
 
    <option value="">Choice one</option> 
 
     <option value="1">US</option> 
 
     <option value="2">UK</option> 
 
     <option value="3">GR</option> 
 
     <option value="4">IT</option> 
 
</select> 
 
<form id="aspnetForm" action="" method="post"> 
 
     Search City: 
 
     <input type="text" id="city" > 
 
</form>

Answer 2

Это код, я использую для передачи более одного значения. Используя это, вы можете передать столько значения, которое вы хотите получить в автозаполнении

$("#ServiceName").autocomplete({ 
      minLength: 3, 
      source: '@Url.Action("FillSelectedSeriesName")', 
      data: { series_id: $("#SeriesName option:selected").text(), series_name: document.getElementById("SeriesName").value }, 
      source: function (request, response) { 
       var term = request.term; 
       var series_id = document.getElementById("SeriesName").value; 
       var series_name = $("#SeriesName option:selected").text(); 
       $.getJSON("FillSelectedSeriesName?term=" + term + '&series_id=' + series_id + '&series_name=' + series_name, request, function (data, status, xhr) { 
        response(data); 
       }); 

      }, 
      select: function (event, ui) { 
       $('#ServiceName').val(ui.item.value); 
       $('#ServiceID').val(ui.item.id); 
      }, 
      change: function (event, ui) { 
      } 
     });