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>
    
    <div>
        <tags-input add-on-space="false" add-on-comma="flag" 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" source="loadTags($query)"></auto-complete>
        </tags-input>
        <p>Model: {{tags}}</p>
    </div>
    
      <div>
        <tags-input add-on-space="false" add-on-comma="false" add-on-blur="true" add-on-paste="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"
    }, {
        text: "bill"
    }, {
        text: "charlie"
    }/*, {
        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
    }, {
        name: "albert",
        nameFlag: false
    }, {
        name:...