SuggestBox Example: ComboBox

ComboBox behaviour (maxSelection=1, closeListOnSelect=true). Selected item will have different background (selectedListItemClass="sb-list-item-checked").

by Askarbek Zadauly

HTML

<script src="https://ascarbek.github.io/suggestbox/vendor/angular-suggestbox/dist/suggest.box.min.js"></script>
<link rel="stylesheet" href="https://ascarbek.github.io/suggestbox/vendor/angular-suggestbox/dist/suggest.box.min.css">
<link rel="stylesheet" href="https://ascarbek.github.io/suggestbox/vendor/font-awesome/css/font-awesome.min.css">
<script src="https://fonts.googleapis.com/css?family=Open+Sans:400,600&amp;subset=latin,cyrillic-ext"></script>
<div class="example" ng-app="demo" ng-controller="demo as vm">
    <div class="label">Select city:</div>
    <div
                    az-suggest-box
                    sb-list="vm.cities"
                    sb-selected-list-item-class="sb-list-item-checked"
                    sb-close-list-on-select="true"
                    sb-max-selection="1"
                    class="suggest-box">
                <div sb-trigger-area class="select">
                    <div class="input">
                        <div sb-selection-item >{{s.name}}</div>
                        <input sb-type-ahead tabindex="2">
                    </div>

                    <button ><i class="fa fa-chevron-down"></i></button>
                </div>

                <ul class="dropdown">
                    <li sb-dropdown-item class="item">{{i.name}}</li>
                </ul>
            </div>
</div>

CSS

body
{
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
}

*, *:before, *:after
{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}

.example
{
    margin: 20px 10px;
}

.example .label
{
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 5px;
}

JavaScript

(function(){
    'use strict';

    var app = angular.module('demo', ['azSuggestBox']);
	app.controller('demo', ['$scope', function($scope){
        	var vm = this;
            
            vm.cities = [
                {
                    name: 'Beijing',
                    population: 20693000,
                    country: 'China'
                },{
                    name: 'Tokyo',
                    population: 13189000,
                    country: 'Japan'
                },{
                    name: 'Moscow',
                    population: 11541000,
                    country: 'Russia'
                },{
                    name: 'Seoul',
                    population: 10369593,
                    country: 'South Korea'
                },{
                    name: 'Jakarta',
                    population: 10187595,
                    country: 'Indonesia'
                },{
                    name: 'Mexico City',
                    population: 8851080,
                    country: 'Mexico'
                },{
                    name: 'London',
                    population: 8630100,
                    country: 'United Kingdom'
                },{
                    name: 'Lima',
                    population: 8481415,
                    country: 'Peru'
                },{
                    name: 'Bangkok',
                    population: 8249117,
                    country: 'Thailand'
                },{
                    name: 'Tehran',
                    population: 8154051,
                    country: 'Iran'
                },{
                    name: 'Bogotá',
                    population: 7438376,
                    country: 'Colombia'
                },{
                    name: 'Hong Kong',
                    population: 7298600,
                    country: 'Hong Kong (China)'
                }
            ];
        }]);
})();