User object to populate md-items in md-autocomplete

Question

I want to populate my md-autocomplete with an object containing user objects. It's retrieved in JSON format through a factory into $scope.users. I can check the object in my console using an Angular viewer.

users:
    user_id:
        display_name: "value"
        first_name: "value"
        last_name: "value"
    user_id:
        display_name: "value"
        first_name: "value"
        last_name: "value"
    etc...

I want the model value to be set to the user_id model and the display text to be display_name. Is this possible? I have tried (according to the documentation only the md-items attribute should be required

<md-autocomplete md-items="u in users"></autocomplete>

But it doesn't do anything. Neither does following the "basic example"

<md-autocomplete md-selected-item="videoInfo.lineUp.1" md-search-text="looseheadSearchText" md-items="u in users" md-item-text="u.display_name"></md-autocomplete>

EDIT

Here's the code I use to get my users object:

angular.module("app").controller("MainController", ["$scope", "userRepository", function ($scope, userRepository) {
    userRepository.get(function(data) {
        $scope.users = data;
    });

app.factory("userRepository",
    function($resource) {
        return $resource("/wp-content/themes/zerif-lite-child/inc/get_users.php");
    });

Check this link out, read their docs on md-autocomplete, https://material.angularjs.org/latest/demo/autocomplete and try them out before asking. — SLearner, Sep 05 '16 at 19:43
I did, but I used this link: https://material.angularjs.org/latest/api/directive/mdAutocomplete. I though only the md-items attribute was required to make this work. I saw that there is also a md-item-text attribute, but that's not the issue at hand. I can't get the items to load, and the documentation is just not clear enough for me to understand... — Sjors Hijgenaar, Sep 05 '16 at 21:37
@SLearner Do you have any tips on how to implement the `searchQuery` function described in all the documentation examples? I really don't get the documentation.. — Sjors Hijgenaar, Sep 06 '16 at 17:04

Jahongir Rahmonov · Answer 1 · 2016-09-08T05:20:54.200

1

You should always take a look at the documentation first before asking a question.

It says you need at least something like this:

<md-autocomplete
      md-selected-item="selectedUser"
      md-search-text-change="searchTextChange(searchText)"
      md-search-text="searchText"
      md-selected-item-change="selectedItemChange(item)"
      md-items="item in querySearch(searchText)"
      md-item-text="item.display_name"
      md-min-length="0"
      placeholder="What is your favorite User?">
    <md-item-template>
      <span md-highlight-text="searchText" md-highlight-flags="^i">{{item.display_name}}</span>
    </md-item-template>
    <md-not-found>
      No states matching "{{searchText}}" were found.
    </md-not-found>
  </md-autocomplete>

Hope it helps

UPDATE

searchQuery() is a function that gets called every time you type something. Basically, what you need is a function that returns all users if nothing is written or only the users whose names include whatever is written in the autocomplete input.

You should not do exactly what is done in examples. Because you are using real $http requests and they do not. They just simulate it with the help of different functions like timeout and map. Your function should look something like this:

$scope.searchQuery = function(searchText){
     return userRepository.get(searchText);
}

That's it.

As for using this instead of $scope, this is what John Papa recommends in his angular styleguide. He says $scope should be used in more specific conditions only.

edited Sep 08 '16 at 05:20

answered Sep 05 '16 at 19:27

Jahongir Rahmonov

13,083
10
47
91

Actually I did look at the [documentation](https://material.angularjs.org/latest/api/directive/mdAutocomplete) first, but it struck me that only the `md-items` attribute was required (why else is there a * in front of it right?) – Sjors Hijgenaar Sep 05 '16 at 21:37
Maybe I should have stated it more clearly, so I revised my question. I suspect it has something to do with the `querySearch()` function from the documentation. However, I don't get how it works. – Sjors Hijgenaar Sep 06 '16 at 16:47
@SjorsHijgenaar how do you get your `users` data? are you getting it through `$http` request? – Jahongir Rahmonov Sep 06 '16 at 17:59
@Jaohngir Rahmonov Yes, I will edit the code to incorporate it. – Sjors Hijgenaar Sep 07 '16 at 07:47
@SjorsHijgenaar see my update for an explanation of what `searchQuery()` is – Jahongir Rahmonov Sep 07 '16 at 19:05
What does the map function do? Because if I simply return `$scope.users` from the function, still nothing happens – Sjors Hijgenaar Sep 07 '16 at 20:31
And why do the documentation examples employ a `var self = this` construction? I guess that's also why they use `ctrl.searchText()` rather than `searchText`. Does md-autocomplete create a separate `$scope`? – Sjors Hijgenaar Sep 07 '16 at 20:40
@SjorsHijgenaar answered your questions in the update. – Jahongir Rahmonov Sep 08 '16 at 05:21
I can see the function being called, but it simply returns all user objects... There's no filtering going on and there's no dropdown of options either. Nothing happens really – Sjors Hijgenaar Sep 08 '16 at 17:07

score 0 · Accepted Answer · edited Feb 15 '18 at 19:09

HTML:

<md-autocomplete
    md-selected-item="videoInfo.lineUp[1]"
    md-search-text="searchText"
    md-items="item in searchQuery(searchText)"
    md-item-text="item.display">
</md-autocomplete>

Angular searchQuery() function:

$scope.searchQuery = function (searchText) {
    var query = searchText.toLowerCase();
    var users = [];
    angular.forEach($scope.users,
        function (value, key) {
            // value = user object
            // key = userId
            var dN = value["display_name"];
            if (dN) {
                var obj = {};
                obj[key] = value;
                obj["display"] = dN;
                if (dN.toLowerCase().indexOf(query) !== -1) {
                    users.push(obj);
                }
            }
        });
    return users;
}

User object to populate md-items in md-autocomplete

EDIT

2 Answers2