Textbox with autocomplete dropdown Ionic

Directive

app.directive('ionSelect', function ($rootScope) {
    'use strict';
    return {
        restrict: 'EAC',
        scope: {
            label: '@',
            labelField: '@',
            provider: '=',
            ngModel: '=?',
            ngValue: '=?',
            labelId: '@',
            placeholderValue: '@',
            globalClass: '@',
            placeholderClass: '@',
        },
        require: '?ngModel',
        transclude: false,
        replace: false,
        template: '<div class="item item-input-inset noBorderTop noPadding divSlectText">'
                + '<label class="item-input-wrapper">'
                + '<input id="filtro" class="{{placeholderClass}}" type="search" intype="placeholder" language-seletion key="{{placeholderValue}}"   ng-model="ngModel" ng-value="ngValue" /></label>'
                + '<button class="button button-small button-clear inputOpen"><i class="icon ion-chevron-down"></i>'
                + '</button></div><div class="optionList padding-left padding-right hideSelectText">'
                + '<ion-scroll class="selectScroll"><ul class="list">'
                + '<li class="item  {{globalClass}}" ng-click="selecionar($event,item,labelField,labelId)" ng-repeat="item in provider | filter:ngModel">{{item[labelField]}}</li></ul>'
                + '</ion-scroll></div>',
        link: function (scope, element, attrs, ngModel) {
            scope.ngValue = scope.ngValue !== undefined ? scope.ngValue : 'item';
            scope.selecionar = function ($event,item, name, id) {
               
                ngModel.$setViewValue(item[name]);              
                if (name == 'SpecialityName') {
                    $rootScope.medicalProviderData.SpecialityId = { SpecialityId: item[id] };
                }
                scope.showHide = false;                $event.target.parentElement.parentElement.parentElement.classList.remove("showSelectText");
                $event.target.parentElement.parentElement.parentElement.classList.add("hideSelectText");
            };
            element.bind('click', function () {
                element.find('input').focus();
            });
            element.find('button').bind('click', function () {
                var $this = $(this);
                $('.divSlectText').each(function () {
                    if ($this.parent().parent().find('.optionList').html() != $(this).parent().find('.optionList').html()) {
                        if ($(this).find('button').hasClass('inputOpen')) {
                            $(this).parent().find('.optionList').removeClass('showSelectText');
                            $(this).parent().find('.optionList').addClass('hideSelectText');
                        }
                    }
                });
                if ($this.parent().parent().find('.optionList').hasClass('hideSelectText')) {
                    $this.parent().parent().find('.optionList').removeClass('hideSelectText');
                    $this.parent().parent().find('.optionList').addClass('showSelectText');
                }
                else {
                    $this.parent().parent().find('.optionList').addClass('hideSelectText');
                }
            });
            element.find('input').bind('keydown', function () {              
                var $this = $(this);              
                $this.parent().parent().parent().find('.optionList').addClass('showSelectText')
                $this.parent().parent().parent().find('.optionList').removeClass('hideSelectText')
            });
        },
    };

});

CSS


.showSelectText {
    display:block;
}
.hideSelectText {
    display:none;

}

HTML

  <div>
       <ion-select label="SpecialityName" global-class="{{globalClass}} {{textAlign}}" placeholder-class="{{globalClass}} {{textAlign}}" placeholder-value="Speciality" label-field="SpecialityName" itemname="SpecialityName" label-id="SpecialityId" provider="SpecialityList" ng-model="speciality" />

                    </div>

read more