SuggestBox Example: Custom layout Example

In this example items in the dropdown list has custom layout. All styles are written as inline style so you can copy it. Best practice would be keeping those styles in a separate css.

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 status:</div>
    <div
         az-suggest-box
         sb-list="vm.names"
         sb-selected-list-item-class="sb-list-item-checked"
         sb-max-selection="1"
         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" style="
                                                     display: flex;
                                                     flex-direction: row;
                                                     align-items: center;
                                                     justify-content: flex-start;
                                                     padding: 8px 12px;
                                                     ">
                <div style="margin-right: 10px;">
                    <button style="

                                   color: #ffffff;
                                   background-color: #fc9282;
                                   text-align: center;
                                   width: 45px;
                       ...

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;
            
            // generated by http://www.theonegenerator.com/
            vm.names = [
                {
                    "name" : "Halle Berry",
                    "password" : "d%T6HL|s10Sb&0p",
                    "cc" : "4929933097411625",
                    "lorem" : "Amet consectetur adipiscing.",
                    "email" : "in@amet.com",
                    "date" : "09/06/2008"
                },
                {
                    "name" : "Julia Roberts",
                    "password" : "*O71d=OCqPue94!",
                    "cc" : "4485236820938088",
                    "lorem" : "Dapibus ultrices in iaculis nunc sed augue lacus.",
                    "email" : "nec@faucibus.com",
                    "date" : "22/12/2012"
                },
                {
                    "name" : "Leighton Meester",
                    "password" : "t3,:X55[CHGf1ie",
                    "cc" : "4539397204545547",
                    "lorem" : "Pretium aenean pharetra magna ac placerat vestibulum lectus mauris.",
                    "email" : "enim@tempus.com",
                    "date" : "01/12/2008"
                },
                {
                    "name" : "Brittany Snow",
                    "password" : "fg%CDK=14A52ho$",
                    "cc" : "4539226759728630",
                    "lorem" : "Laoreet suspendisse interdum consectetur.",
                    "email" : "tellus@tristique.com",
                    "date" : "04/08/2014"
                },
                {
                    "name" : "Tom Hardy",
                    "password" : "vR0198xV=tDu+_F",
                    "cc" : "4716543062402934",
                    "lorem" : "Sit amet dictum sit amet justo donec enim diam vulputate.",
                    "email" : "nisi@condimentum.com",
              ...