Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Sören Deger 733 posts 2844 karma points c-trib
    Mar 06, 2015 @ 11:55
    Sören Deger
    0

    AngularJS directive for autocomplete?

    Does anyone know a AngularJS Directive for an autocomplete function or a good tutorial. I have not found any good directive for AngularJS version 1.1.5.

    Thanks in advance.

    Best, Sören

  • Sören Deger 733 posts 2844 karma points c-trib
    Mar 06, 2015 @ 15:00
    Sören Deger
    101

    Now I have created my own very simple autocomplete function. If it should someone need, here is the code with the basics.

    View:

    <div ng-controller="byte5.addressPickerController">
    <div id="addressSearchContainer" ng-show="addressSearchContainerVisible==true">
    <input type="text" class="searchField innerBox" ng-model="searchTerm" /><a href="" class="btn btn-success"> Your button text </a>
    <div class="autocomplete innerBox" ng-show="autocompleteHide==false">
    <ul>
    <li ng-repeat="autoText in autocompleteSource | filter:searchTerm" ng-click="selectAutoText(autoText)">{{autoText}}</li>
    </ul>
    </div>
    </div>
    </div>

    Controller:

    angular.module("umbraco").controller("byte5.addressPickerController", function ($scope) {
    $scope.autocompleteSource = [ "Berlin","Frankfurt","Halle","Hamburg","Hannover","München","Stuttgart","Köln","Saarbrücken","Dresden"];

    $scope.autocompleteHide = true;

    $scope.selectAutoText = function(text) {
            $scope.searchTerm = text;
            $scope.searchTermSelected = true;
            $scope.autocompleteHide = true;
    }

        $scope.$watch('searchTerm', function (newVal, oldVal) {
            if ($scope.searchTermSelected == false) {
                if (newVal != undefined) {
                    if (newVal.length > 2) {
                        $scope.autocompleteHide = false;
                    } else {
                        $scope.autocompleteHide = true;
                    }
                }
            } else {
                $scope.searchTermSelected = false;
            }
    });
    });

    CSS:

    #addressSearchContainer {
        margin: 10px 0px;
        border: 1px solid #ccc;
    }
    
    .innerBox {
        margin-left: 10px;
        margin-right: 10px;
    }
    
    .searchField {
        width: 58%;
        margin-right: 10px;
    }
    
    .autocomplete ul {
        margin-left: 0px;
        border: 1px solid #ccc;
        width: 58%;
    }
    
    .autocomplete ul li{
        list-style: none;
        padding: 5px 6px 5px 6px;
    }
    
    .autocomplete ul li:hover {
        background-color: #f8f8f8;
    }

     

    It is certainly not the best way to solve this, but it is a possible solution

    I hope it helps everyone needs something like this.

     

    Best, 
    Sören 

Please Sign in or register to post replies

Write your reply to:

Draft