How to make search type dropdown using angular js?

Question

I have list of countries with state and country. This code is working with a cascading dropdown. How can I make a dropdown based on user input

Expectation: When I click Country Dropdown one text box with list should come if user enter input based country list should come (like search).

I have added my code below

angular.module('test', [])
    .controller('TestController', ['$scope', '$filter',

function ($scope, $filter) {
    $scope.country = "India";
    $scope.state = "Rajasthan";
    $scope.city = "Ajmer";

    $scope.countries = [{
        "name": "India",
            "states": [{
            "name": "Maharashtra",
                "cities": [{
                "name": "Pune"
            }, {
                "name": "Mumbai"
            }, {
                "name": "Nagpur"
            }, {
                "name": "Akola"
            }]
        }, {
            "name": "Madhya Pradesh",
                "cities": [{
                "name": "Indore"
            }, {
                "name": "Bhopal"
            }, {
                "name": "Jabalpur"
            }]
        }, {
            "name": "Rajasthan",
                "cities": [{
                "name": "Jaipur"
            }, {
                "name": "Ajmer"
            }, {
                "name": "Jodhpur"
            }]
        }]
    }, {
        "name": "USA",
            "states": [{
            "name": "Alabama",
                "cities": [{
                "name": "Montgomery"
            }, {
                "name": "Birmingham"
            }]
        }, {
            "name": "California",
                "cities": [{
                "name": "Sacramento"
            }, {
                "name": "Fremont"
            }]
        }, {
            "name": "Illinois",
                "cities": [{
                "name": "Springfield"
            }, {
                "name": "Chicago"
            }]
        }]
    }, {
        "name": "Australia",
            "states": [{
            "name": "NewSouthWales",
                "cities": [{
                "name": "Sydney"
            }]
        }, {
            "name": "Victoria",
                "cities": [{
                "name": "Melbourne"
            }]
        }]
    }];

    $scope.getStates = function () {
        $scope.states = null;
        $scope.cities = null;
        console.log($scope.country);
        if ($scope.country != null) {
            var filteredCountry = $filter("filter")($scope.countries, $scope.country);
            if (filteredCountry != null && filteredCountry.length == 1) {
                $scope.states = filteredCountry[0].states;
            }
        }
    };

    $scope.getCity = function () {
        $scope.cities = null;
        if ($scope.state != null) {
            var filteredState = $filter("filter")($scope.states, $scope.state);
            if (filteredState != null && filteredState.length == 1) {
                $scope.cities = filteredState[0].cities;
            }
        }
    };

    if ($scope.country != null) {
        var filteredCountry = $filter("filter")($scope.countries, $scope.country);
        if (filteredCountry != null && filteredCountry.length == 1) {
            $scope.states = filteredCountry[0].states;

            var filteredState = $filter("filter")($scope.states, $scope.state);
            if (filteredState != null && filteredState.length == 1) {
                $scope.cities = filteredState[0].cities;
            }
        }
    }

    $scope.alertCity = function () {
        alert('You selected ' + $scope.city);
    };
    //console.log($scope.countries);
}]);

html

<div ng-app="test">
    <div ng-controller="TestController">
        <div>Country:
            <select ng-model="country" ng-options="country.name as country.name for country in countries" ng-change="getStates()">
                <option value=''>Select</option>
            </select>
        </div>
        <div>States:
            <select id="state" ng-disabled="!country" ng-model="state" ng-options="state.name as state.name for state in states" ng-change="getCity()">
                <option value=''>Select</option>
            </select>
        </div>
        <div>City:
            <select id="city" ng-disabled="!country || !state" ng-model="city" ng-options="city.name as city.name for city in cities" ng-change="alertCity()">
                <option value=''>Select</option>
            </select>
        </div>
    </div>
</div>

mydemo I want to introduce a filter for every dropdown.

You can actually do the same using [Select2](http://select2.github.io). Do you specifically need it for AngularJS? — Praveen Kumar Purushothaman, Jan 07 '16 at 10:15
You have already implemented the "injection" part using AngularJS right? OKay, let me add an answer for you. Tell if it suits you. — Praveen Kumar Purushothaman, Jan 07 '16 at 10:16
Check my answer and tell if it works. `:)` Kindly accept if it is the one you are expecting. Also, let me know if you need more changes. — Praveen Kumar Purushothaman, Jan 07 '16 at 10:21

score 0 · Accepted Answer · answered Jan 07 '16 at 10:21

You can actually do the same using Select2. Since you are already populating the data using AngularJS, that's done. So check this snippet out:

angular.module('test', [])
    .controller('TestController', ['$scope', '$filter',

function ($scope, $filter) {
    $scope.country = "India";
    $scope.state = "Rajasthan";
    $scope.city = "Ajmer";

    $scope.countries = [{
        "name": "India",
            "states": [{
            "name": "Maharashtra",
                "cities": [{
                "name": "Pune"
            }, {
                "name": "Mumbai"
            }, {
                "name": "Nagpur"
            }, {
                "name": "Akola"
            }]
        }, {
            "name": "Madhya Pradesh",
                "cities": [{
                "name": "Indore"
            }, {
                "name": "Bhopal"
            }, {
                "name": "Jabalpur"
            }]
        }, {
            "name": "Rajasthan",
                "cities": [{
                "name": "Jaipur"
            }, {
                "name": "Ajmer"
            }, {
                "name": "Jodhpur"
            }]
        }]
    }, {
        "name": "USA",
            "states": [{
            "name": "Alabama",
                "cities": [{
                "name": "Montgomery"
            }, {
                "name": "Birmingham"
            }]
        }, {
            "name": "California",
                "cities": [{
                "name": "Sacramento"
            }, {
                "name": "Fremont"
            }]
        }, {
            "name": "Illinois",
                "cities": [{
                "name": "Springfield"
            }, {
                "name": "Chicago"
            }]
        }]
    }, {
        "name": "Australia",
            "states": [{
            "name": "NewSouthWales",
                "cities": [{
                "name": "Sydney"
            }]
        }, {
            "name": "Victoria",
                "cities": [{
                "name": "Melbourne"
            }]
        }]
    }];

    $scope.getStates = function () {
        $scope.states = null;
        $scope.cities = null;
        console.log($scope.country);
        if ($scope.country != null) {
            var filteredCountry = $filter("filter")($scope.countries, $scope.country);
            if (filteredCountry != null && filteredCountry.length == 1) {
                $scope.states = filteredCountry[0].states;
            }
        }
    };

    $scope.getCity = function () {
        $scope.cities = null;
        if ($scope.state != null) {
            var filteredState = $filter("filter")($scope.states, $scope.state);
            if (filteredState != null && filteredState.length == 1) {
                $scope.cities = filteredState[0].cities;
            }
        }
    };

    if ($scope.country != null) {
        var filteredCountry = $filter("filter")($scope.countries, $scope.country);
        if (filteredCountry != null && filteredCountry.length == 1) {
            $scope.states = filteredCountry[0].states;

            var filteredState = $filter("filter")($scope.states, $scope.state);
            if (filteredState != null && filteredState.length == 1) {
                $scope.cities = filteredState[0].cities;
            }
        }
    }

    $scope.alertCity = function () {
        alert('You selected ' + $scope.city);
    };
    //console.log($scope.countries);
}]);
$(function () {
  setTimeout(function () {
    $("select").select2();
  }, 100);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.full.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" />
<div ng-app="test">
  <div ng-controller="TestController">
    <div>Country:
      <select ng-model="country" ng-options="country.name as country.name for country in countries" ng-change="getStates()">
        <option value=''>Select</option>
      </select>
    </div>
    <div>States:
      <select id="state" ng-disabled="!country" ng-model="state" ng-options="state.name as state.name for state in states" ng-change="getCity()">
        <option value=''>Select</option>
      </select>
    </div>
    <div>City:
      <select id="city" ng-disabled="!country || !state" ng-model="city" ng-options="city.name as city.name for city in cities" ng-change="alertCity()">
        <option value=''>Select</option>
      </select>
    </div>
  </div>
</div>

how can i use my own css for dropdown.is it possible to write css for dropdown? — , Jan 07 '16 at 10:25
@komal Do you have one? Can you share it, I can help you to change the CSS to what Select2 uses. So it would be your CSS in Select2's layout. Does it help? — Praveen Kumar Purushothaman, Jan 07 '16 at 10:26
can you please check this http://stackoverflow.com/questions/34649045/how-to-make-cascading-dropdown-using-angularjs — , Jan 07 '16 at 10:31
one bug is there in your code .if i change country state name not getting empty its showing old value.but that list getting change based on selecton@Praveen Kumar — , Jan 11 '16 at 09:26
@komal Can you please check this once: http://stackoverflow.com/questions/13240047/clear-dropdown-using-jquery-select2? — Praveen Kumar Purushothaman, Jan 11 '16 at 11:18
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/100398/discussion-between-komal-and-praveen-kumar). — , Jan 11 '16 at 16:09

How to make search type dropdown using angular js?

1 Answers1