SuggestBox Example: Basic example

Minimum setup. Can select multiple items. Selected items will be hidden from dropdown list.

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"
         class="suggest-box">
        <div class="select">
            <div class="input">
                <div sb-selection-item class="selection-item">{{s.name}}&nbsp;<span sb-remove-item-from-selection class="rem-btn"><i class="fa fa-times"></i></span></div>
                <input sb-trigger-area sb-type-ahead tabindex="1">
            </div>

            <button sb-trigger-area><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)'
                }
            ];
        }]);
})();