CODEWITHSUNDEEP
angularjscordovaautocompleteionic-framework
H_C
H_C

Reputation: 337

I cant get the ionic autocomplete to work with

I am using guylabs/ion-autocomplete but facing some problems when running it in the ios and android emulator. Beforehand I made a mockup running it in the browser and this worked fine, but when copying the same code to my actual project I got an error. Could someone please help me.. dont have any clue!

The following error I got in the console: [Error] Error: collection-repeat expected attribute collection-item-height to be a an expression that returns a number (in pixels) or percentage.

HTML

<div class="list card">
    <ion-autocomplete 
        ng-model="model"
        item-value-key="view"
        item-view-value-key="name"
        item-view-value-key="id"
        items-method="getTestItems(query)"
        items-method-value-key="items"
        items-clicked-method="itemsClicked(callback)"
        select-items-label="SEARCH"
        selected-items-label="Selected:"/>
</div>

JS

tcControllers.controller('SomeCtrl', function ($scope, $stateParams, $localStorage) {
$localStorage.getObject('Something').forEach(function(ticket){
    if (ticket.id == parseInt($stateParams.ticketId)){
        $scope.ticket = ticket;
    }
});
$scope.model = "";
$scope.callbackValueModel = "";
$scope.getTestItems = function (query) {
    var zoekItems = [
        {id: "1", name: "John", view: "John: "},
        {id: "2", name: "Richard", view: "Richard: "},
        {id: "3", name: "Steve", view: "Steve: "},
    ];
    var returnValue = { items: [] };
    zoekItems.forEach(function(item){
        console.log(item);
        if (item.name.indexOf(query) > -1 ){
            returnValue.items.push(item);
        }
        else if (item.id.indexOf(query) > -1 ){
            returnValue.items.push(item);
        }
    });
    return returnValue;
};
$scope.itemsClicked = function (callback) {
    $scope.callbackValueModel = callback;
}

});

Upvotes: 2

Views: 5920

Answers (1)

aquint
aquint

Reputation: 512

This seems to be an issue with the collection-repeat directive that autocomplete is using. It's probably best to update to the latest stable Ionic version (1.0.0) which will resolve this issue. You can also go into lib/ion-autocomplete/dist/ion-autocomplete.js and add collection-item-height="52" in place of item-height (line 88) and it should work, but I would recommend updating.

Upvotes: 2

Related Questions