angular js autocomplete key value array

Question

I looked at the autocomplete example in: http://jsfiddle.net/sebmade/swfjT/ How can i make an auto complete to key value array? This is my array:

$countryCodesToCountryNames = array(
"AD" => "Andorra",
"AE" => "United Arab Emirates",
"AF" => "Afghanistan",
"AG" => "Antigua and Barbuda",
"AI" => "Anguilla",
"AL" => "Albania",
"AM" => "Armenia",
"AO" => "Angola",
"AQ" => "Antarctica",
"AR" => "Argentina",
"AS" => "American Samoa",
"AT" => "Austria",
"AU" => "Australia",
"AW" => "Aruba",
"AX" => "Åland Islands",
"AZ" => "Azerbaijan",
"BA" => "Bosnia and Herzegovina",
"BB" => "Barbados",
"BD" => "Bangladesh",
"BE" => "Belgium",
"BF" => "Burkina Faso",
"BG" => "Bulgaria",
"BH" => "Bahrain",
"BI" => "Burundi",
"BJ" => "Benin",
"BL" => "Saint Barth,élemy",
"BM" => "Bermuda",
"BN" => "Brunei Darussalam",
"BO" => "Bolivia, Plurinational State of",
"BQ" => "Bonaire, Sint Eustatius and Saba",
"BR" => "Brazil",
"BS" => "Bahamas",
"BT" => "Bhutan",
"BV" => "Bouvet Island",
"BW" => "Botswana",
"BY" => "Belarus",
"BZ" => "Belize",
"CA" => "Canada");

I need that the autocomplete input field will present the country name(array value), But when selected(on-click) i'll get the country code(array key) to the angular controller.

what is the code changes needed in the example above?

You could user the angular bootstrap typeahead directive.

Jonathan Palumbo
– Jonathan Palumbo

2013-11-20 15:44:00 +00:00
Commented Nov 20, 2013 at 15:44 — Jonathan Palumbo
– Jonathan Palumbo, Commented Nov 20, 2013 at 15:44

Jorge Casariego · Accepted Answer · 2015-03-17 12:07:48Z

I did an example for this case using another kind of array.

I changed in this way the array

$scope.selectedCountry = '';
$scope.countryCodesToCountryNames = [
         {'code':'AD', 'name': 'Andorra'},
         {'code':'BZ', 'name': 'Belize'},
         {'code':'CA', 'name': 'Canada'}];

in your html you put this code

                 <blockquote>
                  CODE: {{selectedCountry.code}}<br/>                  
                  NAME: {{selectedCountry.name}}<br/>                  
                </blockquote>
                Select Country: <input type="text" ng-model="selectedCountry" typeahead="country as (country.name ) for country in countryCodesToCountryNames | filter:$viewValue" />

This are 3 examples of autocompleted: jsfiddle

HTML Code

<div class="container">
    <div ng-controller="mainCtrl" class="row-fluid">
        <form class="row-fluid">
            <div class="container-fluid"><br/>
                 <blockquote>
                  State: {{selectedState}}<br/>
                </blockquote>

                Select States: <input type="text" ng-model="selectedState" typeahead="state for state in states | filter:$viewValue" />
                <br/>

                <blockquote>
                  ID: {{selectedUser.id}}<br/>
                  Name: {{selectedUser.name + ' ' + selected.last}}<br/>
                  Age: {{selectedUser.age}}<br/>
                  Gender: {{selectedUser.gender}}
                </blockquote>

                Select User: <input type="text" ng-model="selectedUser" typeahead="user as (user.first + ' ' + user.last) for user in users | filter:$viewValue" />

                <br/>

                <blockquote>
                  CODE: {{selectedCountry.code}}<br/>                  
                  NAME: {{selectedCountry.name}}<br/>                  
                </blockquote>
                Select Country: <input type="text" ng-model="selectedCountry" typeahead="country as (country.name ) for country in countryCodesToCountryNames | filter:$viewValue" />
            </div>
        </form>
    </div>
</div>

Javascript code

angular.module('myApp', ['ui.bootstrap'])
    .controller("mainCtrl", function ($scope) {
    $scope.selectedState = '';
    $scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];

    $scope.selectedUser = '';
    $scope.users = [
    {'id': 1, 'first': 'John', 'last': 'Depp', 'age':52, 'gender':'male'}, 
    {'id': 2, 'first': 'Sally', 'last': 'JoHanson', 'age':13, 'gender':'female'},
    {'id': 3, 'first': 'Taylor', 'last': 'Swift', 'age':22, 'gender':'female'},
    {'id': 4, 'first': 'Max', 'last': 'Payne', 'age':72, 'gender':'male'},
    {'id': 5, 'first': 'Jessica', 'last': 'Hutton', 'age':12, 'gender':'female'},
    {'id': 6, 'first': 'Nicholas', 'last': 'Cage','age':3, 'gender':'male'},
    {'id': 7, 'first': 'Lisa', 'last': 'Simpson', 'age':18, 'gender':'female'}
  ];

     $scope.selectedCountry = '';
     $scope.countryCodesToCountryNames = [
         {'code':'AD', 'name': 'Andorra'},
         {'code':'BZ', 'name': 'Belize'},
         {'code':'CA', 'name': 'Canada'}];
});

Boris Ivanov · Accepted Answer · 2013-11-20 16:05:16Z

0

Have a look at http://starttheshift.github.io/MacGyver/example/#autocomplete There

mac-autocomplete-on-select
Type: Function
Function called when user select on an item

    selected - {Object} The item selected

So u get triggered when selected item. then you can get Index of element in original array. Use this Index to get Correspondent Item from another array with Short Namings.

 $scope.countries= ["Unates States", "Germany"];
 $scope.cn= ["US", "DE"];

answered Nov 20, 2013 at 16:05

Boris Ivanov

4,2541 gold badge35 silver badges42 bronze badges

Collectives™ on Stack Overflow

angular js autocomplete key value array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related