jQuery 自动完成源取决于不同的输入

Question

这里只发布了 2 个选项的解决方案 @VinayC :
jQuery UI - Autocomplete source dependent from selected option in different input

但是我的 select 中需要针对两个以上选项的解决方案？
代码在这里： 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) {
            }
        });

jQuery 自动完成源取决于不同的输入

jQuery Autocomplete source dependent from different input

jquery

jquery-ui

autocomplete

jquery-autocomplete

jquery-ui-autocomplete