How to Implement a Object Filter instead of Strings

[FerchoCarcho]

Hello @fareez-ahamed and Thank you for the excellent tutorial,

Im trying to implement your Typeahead component but instead of searching only an array of strings, an array of Objects like.

"subscribers": [
    {
      "id": 2,
      "firstname": "user1",
      "lastname": "user1",
      "email": "user1@example.com",
    },
  {
      "id": 3,
      "firstname": "user2",
      "lastname": "user2",
      "email": "user2@example.com",
    }
  ]

And when an option is Clicked to set the email as the chosen field.

Ive read this Forum Thread but it seems filters arent available in vue 2.0 so I would need it to make it with Computed properties.

Please Give me an Advice because when passing the object through Matches: str isnt a string anymore it will become an array of strings. so doesnt work anymore.

matches:function() {
        return this.suggestions.filter(function(str) {
            return str.indexOf(this.selection) >= 0;
        });
        },

I think that implementation would be very usefull to everybody :smile:

[sandmanzz]

yeah.. i have same problem :(

[fareez-ahamed]

Sorry for such a late response!

I'm planning to rewrite it in Vue 2.0 soon.. Will try to address these things Insha Allah

[tomhal]

I'm toying with this code and wanted objects instead of plain strings. I'm far from a VueJS expert but found something that seemed to work.

My objects look like this: { code: "ABCD", name: "The Name", desc: "The Description" }

Change the matches function to:

matches: function () {
      var self = this;
      return this.suggestions.filter(function (item) {
        return item.name.indexOf(self.selection) >= 0 ||
          item.code.indexOf(self.selection) >= 0 ||
          item.desc.indexOf(self.selection) >= 0;
      });
    },

And to make the textbox show one of the properties you could use a computed property, or make the objects themselves decide by implementing toString() on them.

[fareez-ahamed]

Please refer this

https://www.fareez.info/create-your-own-autocomplete-using-vuejs-2/ https://github.com/fareez-ahamed/autocomplete-vuejs2