autocomplete

by Danish Farman

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>
<link rel="stylesheet" href="https://mbenford.github.io/ngTagsInput/css/ng-tags-input.min.css">
<script src="https://mbenford.github.io/ngTagsInput/js/ng-tags-input.min.js"></script>
<script src="http://embed.plnkr.co/bDx54d/tags.json"></script>
<link rel="stylesheet" href="https://mbenford.github.io/ngTagsInput/css/ng-tags-input.bootstrap.min.css">
<div ng-app='MyModule' ng-controller='DefaultCtrl' class="sideinputs">
    <button class="btn btn-primary" ng-click="addNewCategory()">Add New Category</button>
    <div id="categoryDiv" ng-show="addCategoryFlag">
        <div>
            <input auto-complete ui-items="uinames" ng-model="selected" />
            <button class="btn btn-primary" ng-click="addCategory(selected, 8)">Add Category</button>
        </div>
        <div ng-repeat="n in names">
            <div ng-show="n.nameFlag">
                <label>
                    <input type="checkbox" required ng-model="n.nameFlag" /> <span>{{n.name}}</span>

                </label>
            </div>
        </div>
    </div>
    <button ng-click="addTags()" class="btn btn-primary">Add Tags</button>
    <div id="tagDiv" ng-show="addTagFlag" ng-class="{'has-error': (tags === '' || tags === undefined), 'has-success': !(tags === '' || tags === undefined)}">
        <tags-input add-on-space="true" add-on-comma="true" add-on-blur="true" add-on-paste="true" enable-editing-last-tag="true" ng-model="tags" class="ti-input-sm">
            <auto-complete highlight-matched-text="true"...

CSS

#categoryDiv, #tagDiv {
    border: 1px double black;
    padding:2%;
    margin: 2% 0;
}
.sideinputs {
    margin: 10% auto;
    width: 75%;
}

JavaScript

var app = angular.module('MyModule', ['ngTagsInput']);

app.controller('DefaultCtrl', ['$scope', '$http', function ($scope, $http) {

    $scope.tags = [{
        text: 'Tag1'
    }, {
        text: 'Tag2'
    }, {
        text: 'Tag3'
    }];

    $scope.loadTags = function (query) {
        return [{
            "text": "Tag1"
        }, {
            "text": "Tag2"
        }, {
            "text": "Tag3"
        }, {
            "text": "Tag4"
        }, {
            "text": "Tag5"
        }, {
            "text": "Tag6"
        }, {
            "text": "Tag7"
        }, {
            "text": "Tag8"
        }, {
            "text": "Tag9"
        }, {
            "text": "Tag10"
        }]; //$http.get('tags.json');
    };
    $scope.addTagFlag = false;
    $scope.addTags = function () {
        $scope.addTagFlag = true;
    };

    $scope.names = [{
        name: "john",
        nameFlag: false
    }, {
        name: "bill",
        nameFlag: true
    }, {
        name: "charlie",
        nameFlag: true
    }, {
        name: "robert",
        nameFlag: true
    }, {
        name: "alban",
        nameFlag: false
    }, {
        name: "oscar",
        nameFlag: false
    }, {
        name: "marie",
        nameFlag: false
    }, {
        name: "celine",
        nameFlag: false
    }, {
        name: "brad",
        nameFlag: false
    }, {
        name: "drew",
        nameFlag: true
    }, {
        name: "rebecca",
        nameFlag: true
    }, {
        name: "michel",
        nameFlag: true
    }, {
        name: "francis",
        nameFlag: true
    }, {
        name: "jean",
        nameFlag: false
    }, {
        name: "paul",
        nameFlag: false
    }, {
        name: "pierre",
        nameFlag: false
    }, {
        name: "nicolas",
        nameFlag: false
    }, {
        name: "alfred",
        nameFlag: false
    }, {
        name: "gerard",
        nameFlag: false
    }, {
        name: "louis",
        nameFlag: false
    }, {
       ...