jQuery Autocomplete 源依赖于不同的输入答案

【问题标题】：jQuery Autocomplete source dependent from different inputjQuery Autocomplete 源依赖于不同的输入
【发布时间】：2015-07-08 18:08:49
【问题描述】：

此处仅发布 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: []
    });
});

谢谢

【问题讨论】：

这只是一个正在运行的if语句，你之前用过else ifs吗？
@Keypoly 之前不要使用 else ifs，我会尝试 vinayakj 的答案并提供反馈。
@CozyCode 您可以在这里自己尝试答案，stackoverflow 提供了便利，答案下方有“运行代码 sn-p”按钮，以防万一您不知道。
你的意思是..选择多个选项，对吧？？

标签： jquery jquery-ui autocomplete jquery-autocomplete jquery-ui-autocomplete

【解决方案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>

【讨论】：

谢谢@vinayakj。我在我的项目中实现了代码
@CozyCode 我已经用一些优化的代码更新了答案。

【解决方案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) {
            }
        });

【讨论】：