jQuery Autocomplete源依赖于不同的输入 [英] jQuery Autocomplete source dependent from different input

问题描述

仅2个选项的解决方案发布在此处@VinayC:
jQuery UI-自动填充源，取决于来自不同输入中的选定选项

The solution for only 2 options is posted here @VinayC :
jQuery UI - Autocomplete source dependent from selected option in different input

但是我需要一个针对两个以上选择的解决方案?
代码在这里: http://jsbin.com/fakuwohupa/edit?html,js,output

But I need a solution for more than two options in my select?
The code is here: 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: []
    });
});

谢谢

推荐答案

$(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>

这篇关于jQuery Autocomplete源依赖于不同的输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！