Vue-multiselect: Search with Custom Label?

[FascistDonut]

I am trying to search through a list with a custom label comprised of 2 columns (sku and name), but it seems like I can't make it search by the custom label, only by one column or the other. Any suggestions on how I can make that work?

[shentao]

This is a case where one should disable the built-in search :internal-search="false" and use the @search-change event to handle the search query.
See https://monterail.github.io/vue-multiselect/#sub-asynchronous-select for a working example.

The only difference is that you don’t need to make it asynchronous.

[FascistDonut]

I don't quite understand the example... I see where it shows :internal-search="false" and @search-change="asyncFind" and then the function is defined as:

asyncFind (query) {
      this.isLoading = true
      ajaxFindCountry(query).then(response => {
        this.countries = response
        this.isLoading = false
      })
    }

but I don't understand what the code is doing there. It looks like it is making a call to api function from ajaxFindCountry? What does that call do? I'm not sure how to use that to look for matches in my existing options. I'm new to Vue, so maybe this is obvious and I'm just not getting it.

[shentao]

In your case the function would look like this:

<multiselect :options="options" @search-change="search"></multiselect>

search (query) {
  this.options = someData.filter(e => e.sku.includes(query) || e.name.includes(query))
}

[FascistDonut]

For some reason that filter didn't seem to work for me when I tried:

this.options = this.salesorders.filter(e => e.salesorder_number.includes(query) || e.customer_name.includes(query));

But thanks to your clues, I was eventually able to make a case insensitive search work like this (ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter):

search (query) {
              this.options = this.salesorders.filter(function(el) {
                  return el.salesorder_number.toLowerCase().indexOf(query.toLowerCase()) > -1 || el.customer_name.toLowerCase().indexOf(query.toLowerCase()) > -1;
              })
            }

Thanks!

[adi-darachi]

The reason it did not work for you is that you did not set ':internal-search="false"' which means that after you filter the results, The multi-select will filter it also, by label.

So basically if you don't set ':internal-search="false"' you just add ANOTHER filter, not disabling the inital (by label) one.

[rafaelmagalhaes]

I can't get this work can someone point me to the right direction

<multiselect v-if="countries"
                         @input="selectCountry"
                         track-by="city"
                         :options="countries"
                         group-values="top_cities"
                         group-label="country"
                         @search-change="searchCountries"
                         :internal-search="false"
                         :multiple="false"
                         label="city"
                         :group-select="false"
                         placeholder="All"
                         v-model="countryVal">
            </multiselect>


      searchCountries(query) {
        return this.countries.filter(function (el) {
          return el.country.toLowerCase().includes(query.toLowerCase());
        })
      },

[shentao]

Inside the searchCountries method you have to assign this.countries to the new filtered list.

[pandalion]

I am adding my own filter similiar to the above. However, I am losing the search methods when I delete and I end up with an empty list all the time, then have to refresh to get the results back. Please could you advise how I can keep the functionality of filter/unfiltering the list but also add my own query (I am trying to search group labels) thank you