alexurquhart / vue-bootstrap-typeahead

An autocomplete/typeahead component for Vue 2 and Bootstrap 4
https://alexurquhart.github.io/vue-bootstrap-typeahead/
MIT License
206 stars 157 forks source link

Suggestion: support array of objects as data source #62

Open mnantel opened 5 years ago

mnantel commented 5 years ago

Greetings,

Project works great! I am not very experience with JS, but what I was trying to do with this code was to use it to select an item within an array of objects, whereas the searched properties might be distinct than property bound to vmodel. As it stands, is my assumption correct that this is only for simple arrays of strings?

audetcameron commented 5 years ago

you should be able to use the serializer

 :data="associative_array"
 :serializer="myvar=> myvar.keywithstringfromassociative_array"
mattzollinhofer commented 4 years ago

If we understand you right, this should already be supported.

ozziest commented 3 years ago

@alexurquhart,

I have an object array and I want to search it with different properties at the same time. I guess, there is not any way to do that now, isn't it? When I use a serializer, it searches only in the serialized array.

audetcameron commented 3 years ago

@alexurquhart,

I have an object array and I want to search it with different properties at the same time. I guess, there is not any way to do that now, isn't it? When I use a serializer, it searches only in the serialized array.

you could maybe modify your data strings from your API response (or after the response before you set the value to your v-model" example : your response is

{[
{
    'username':'my_username', 
    'first_name':'my_first_name'
},
    'username':'your_username', 
    'first_name':'your_first_name'
}
]} 

use javascript to convert the strings to something like this. (note | is just a character used to separate data in your string) you can use anything you want.

{[
{'my_username | my_first_name'},
{'your_username' | your_first_name}
]} 

then use the custom separator character | to modify the display using a computed property on the "query" v-model data. therefore it only shows my_username but still queries the other data.