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 

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies