md-autocomplete does not work for number field in angularjs

Question

I am working with md-autocomplete in angularjs material. It's working fine when the search field is string. But when it's number then it's does not search as expected.

My code: HTML

<md-autocomplete ng-disabled="isDisabled"
     name="DriverEMP_ID"
     md-selected-item="selectedEMP_ID"
     md-no-cache="ctrl.noCache"
     md-search-text="driverText"
     md-selected-item-change="selectedDriverEMP_IDChange(item)"
     md-items="item in querySearchForDriverEMP_ID(driverText)"
     md-item-text="item.display"
     md-min-length="0"
     placeholder="Driver ID"
     required>
    <md-item-template>
        <span md-highlight-text="driverText" md-highlight-flags="^i">{{item.display}}</span>
    </md-item-template>
    <md-not-found>
        No states matching "{{driverText}}" were found.
    </md-not-found>

</md-autocomplete>

JS

    var self = this;
    var simulateQuery = false;
    $scope.isDisabled = false;

    self.DriverIDList = [{"value":"23869","display":"43721"},{"value":"36407","display":"48188"},{"value":"43942","display":"62924"},{"value":"13911","display":"22831"},{"value":"15531","display":"27175"},{"value":"13531","display":"21609"},{"value":"69526","display":"74854"},{"value":"14085","display":"23122"},{"value":"71018","display":"77915"}];

    $scope.querySearchForDriverEMP_ID = querySearchForDriverEMP_ID;

 function querySearchForDriverEMP_ID(query) {

        var results = query ? self.DriverIDList.filter(createFilterForDriverID(query, objDriverIDListData)) : self.DriverIDList;
        var deferred = $q.defer();
        $timeout(function () { deferred.resolve(results); }, Math.random() * 1000, false);
        return deferred.promise;
    }

 function createFilterForDriverID(query, DriverIDList) {

        var lowercaseQuery = query.toString();
        return function filterFn(DriverIDList) {

            return (DriverIDList.display.indexOf(lowercaseQuery) !== -1);
        };
    }

But for string field it's working fine.

self.DriverIDList = [{"value":"23869","display":"Md. Foysal Iqbal"},{"value":"36407","display":"Md. Saiful Islam"},{"value":"43942","display":"Md.Sajib"},{"value":"13911","display":"Alamgir Hossain"},{"value":"15531","display":"Md.Hossain"},{"value":"13531","display":"Md. Masud Sheikh"},{"value":"69526","display":"Md. Sohel Rana"},{"value":"14085","display":"Monirul Islam"},{"value":"71018","display":"Md. Mohoshin Ali"},{"value":"71185","display":"Md. Al Amin"},{"value":"69306","display":"Md. Mohin Uddin"},{"value":"37269","display":"Md Anis Sardar"},{"value":"13909","display":"Md. Rafiqul Islam"},{"value":"10963","display":"Md. Shah Alam"},{"value":"13860","display":"Md. Abul Hashem"},{"value":"67752","display":"Md. Oli Ullah"},{"value":"45015","display":"Md. Abu Taher "},{"value":"560","display":"Md. Rehad Hossain Mamun"}];

Any help would be appreciated.

Answer 1

Why not keep it simple and just handle it right in the filter function instead of creating your own? Guessing the issue is in your filter. Try this and see if it works.

 self.driverIDList.filter( item => item.display.indexOf(query.toString()) > -1);