Angular.js autocomplete with $http.get TypeError: Cannot read property 'success' of undefined

Question

With this code i always get TypeError: Cannot read property 'success' of undefined. I've tried also with .then instead of .success but i get the same error. After plus than ten hours of googling i'm a little bit desperate...

Html:

<div ng-controller="search_interest" layout="column">
    <md-chips ng-model="ctrl.selectedVegetables" md-autocomplete-snap md-require-match>
        <md-autocomplete
            md-selected-item="selectedItem"
            md-search-text="searchText"
            md-items="item in getInterest(searchText)"
            md-item-text="item.name"
            placeholder="Search for a vegetable">
            <span md-highlight-text="searchText">{{item.name}} :: {{item.type}}</span>
        </md-autocomplete>
        <md-chip-template>
            <span>
            <strong>{{$chip.name}}</strong>
            <em>({{$chip.type}})</em>
            </span>
        </md-chip-template>
    </md-chips>
</div>

And the js:

var app = angular.module('autocomplete_app', ['ngMaterial']);

app.controller('search_interest',
    function($scope, $http){
        $scope.searchText = '';
        $scope.selectedItem = undefined;
        function getInterest($scope){
            $http.get("someurl.php?query=" + $scope.searchText)
                .success(function(data){
                    $scope.interest = data;
                    console.log('data', JSON.stringify(data));
                });
        };
    });

I think the code is already correct. Can you put your code on Plunkr? — lvarayut, Jul 22 '15 at 14:55
Here http://plnkr.co/edit/aWtsG67zTgflF7JUcjSa . i've used really http query url (and a right query can be "mon") — Matteo Disetti, Jul 22 '15 at 15:08
first you have an issue in your plunker on javascript file import is not script.js is app.js — Radu, Jul 22 '15 at 15:49
sorry...yuo're right. now that's app.js. but it doesn't works yet. If i call http://www.disetti.it/inc/users/search_interest.php?query=mon i get results... — Matteo Disetti, Jul 22 '15 at 15:52
http://plnkr.co/edit/MAXFMEfVGpI0DEBCcVzy here is the plunker i don't know why i can't add it to my response. Please some editor add it to the answer — Radu, Jul 22 '15 at 16:19

score 2 · Accepted Answer · edited Aug 07 '16 at 00:15

2

The problem wasn't your http call but the calls that the angular materials import done, as you can see in the bellow image that the problem was on the angularjs-materials.js on line 10.

console image

you can look at this version: I've add the plunker in the comment above.

I've changed a bit the header of the HTML page. this is not working because I can't call for the URL you requested but on your solution should work.

edited Aug 07 '16 at 00:15

Mohammad Kermani

5,188
7
37
61

answered Jul 22 '15 at 16:18

Radu

1,047
12
34

Many thanks! So the problem was only angularjs-material.js version? Now it's working! – Matteo Disetti Jul 22 '15 at 16:49
I dont get this answer. Can someone do an edit and make it understandable? – NishM Jun 09 '17 at 01:36

Amio.io · Answer 2 · 2016-04-28T06:36:07.403

New answer

In the query search function I had

function querySearch(searchText) {
            if (!searchText || searchText.length < 3) {
                return;
            }

I should have returned an empty array instead. return [];

Credits goes to berkyl that answered my issue on github.

Older answer

In bower "angular-material": "^1.0.7" and "angular-material": "^1.0.5" I receive a similar error:

angular.js:13550 TypeError: Cannot read property 'then' of undefined

But when I use a cdn version 1.0.5 it's working fine.

score 0 · Answer 3 · edited Jun 08 '17 at 08:35

Simply use basic autocomplete

https://material.angularjs.org/latest/api/directive/mdAutocomplete

directive then customise on your own.

HTML

<md-autocomplete md-selected-item="selectedItem" md-search-text="searchText" md-items="item in querySearch(searchText)" md-item-text="item.display">
   <md-item-template>
      <span md-highlight-text="searchText">{{item.display}}</span>
   </md-item-template>
   <md-not-found>No matches found.</md-not-found>
</md-autocomplete>

working fine.

Angular.js autocomplete with $http.get TypeError: Cannot read property 'success' of undefined

3 Answers3