jQuery Autocomplete source dependent from different input

Question

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

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: []
    });
});

Thank you

That is just an if statement being ran, have you used else ifs before ? — Spade
– Spade, Commented Jul 8, 2015 at 18:12
@Keypoly don't use else ifs before, I'll try the answer of vinayakj and I come with a feedback. — CozyCode
– CozyCode, Commented Jul 8, 2015 at 18:35
@CozyCode you can try the answer here itself, stackoverflow provides the facility, there is "Run code snippet" button below the answer, just in case you dont know. — vinayakj
– vinayakj, Commented Jul 8, 2015 at 18:46

vinayakj · Accepted Answer · 2017-05-23 16:58:29Z

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>

edited May 23, 2017 at 16:58

answered Jul 8, 2015 at 18:22

vinayakj

5,7013 gold badges30 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

CozyCode Over a year ago

Thank you @vinayakj .I implement the code in my project

vinayakj Over a year ago

@CozyCode I have updated the answer with a bit optimized code.

Kirtesh · Accepted Answer · 2015-07-15 07:59:54Z

This is the code I am using for passing more then one value. Using this you can pass as many value you want in autocomplete

$("#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) {
            }
        });

Collectives™ on Stack Overflow

jQuery Autocomplete source dependent from different input

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related