if possible Please add icon or image in dropdown

In BasicSelect.vue, the following methods:
filteredOptions () {
if (this.searchText) {
return this.options.filter(option => {
return option.text.match(new RegExp(this.searchText, 'i'))
})
} else {
return this.options
}
}
Would you like to open this method to make your own filtering rules?

When putting this in a Nuxt-based project, I get "Cannot read property 'middleware' of undefined", which usually means that the component is doing something on the server side that it can't do.

Does anyone know of a workaround for this?

To recreate, create a project like this:

npx create-nuxt-app my-project

And add the component exactly as the example shows. When loading the page, the above message appears.

Does model select support images in drop down.? If yes then how we can add it

一度登録して検索したあと、
deleteで修正をすると入力テキストが全部消えてしまう

I'd like to be able to use :selected-option="value" where value is just the value for the select, rather than an object with the text + value.

Currently I have to store both the text and value in a cookie in order to correctly pre-fill the select on next page load. This is frustrating when text for that value could change over time and would therefore fall out of sync with my cookie.

semantic-ui multiple-search-selection

When resetTriggerValue's value is falsy, serchText updated to blank.
But this is not good UX.
This should be fixed

Bug on BasicSearch component.
MultiSearch is OK.

It would be nice to have option groups available, or maybe I just could not find it in the documentation.

Semantic UI's Search Selection using <div class="text"></div> for selected contents.

vue-search-select don't.
After first select then click input once more vue-search-select do not show options.
Because searchText alread placed with full option text.

This should be fix.

What is the required setup for the component to behave like the one in the demo?

By "required setup" I mean, what dependencies does the component require? Do I have to use Semantic UI, or any other libraries? I've tried using the component in a project, and it is not behaving the way it does in the demo. Specifically, when I choose an option the menu disappears and also there's no delete icon. I've replicated the demo here. I'm guessing this probably has to do with Semantic UI or something like that.

Thanks!

Thanks for creating and sharing this library!

I'm using BasicSelect and can't get the menu to close when I click an item. Is this a bug?

I'm looking at the source and don't see how this.showItem can ever be false:

https://github.com/moreta/vue-search-select/blob/c4b7a82550cdb8b509336552f9b9ec28230c03c4/src/components/lib/BasicSelect.vue

My code looks just like the sample code.

Thanks for your help!

Option does not open when cursor focused by key tab

I have a select component.
I opened it and clicked on the third option - "Need Confirmation"
I then at some time reseted to the first option with the following code:
this.item = this.options[0]
It seemed to work OK until I pressed on the select again and the third option is highlighted instead of the first one.

You can see as well that the text in the text box shows that it is indeed fixated on the first option but still highlighting the third.

If parent component mutate value of triggerValue, we got this message on Vue2.0

 Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "value"

Using triggerValue prop for reseting value is not good.
"triggerValue" prop it should be remove and research other approch

version: 2.4.0
Why placeholder props not working?

<model-select :options = "sessions" v-model = "searchForm.sessionId"
			title = "Select session" style = "width: 100%; display: inline-block"
			placeholder="select item">
</model-select >

Browser image where select model used:

vuex support

When reset by delete key
ModelListSelect component's value is not reset,
or javascript error occur.

When Scrollbar click,
input's blur event triggered then select option closed

use of keyboard shortcut keys to select, or scroll down

Hello,

How to open multiselect search by button extern

Thx

I was testing and found the following:

Is anyone having problems getting this to work? I did a simple function to print to console, but it doesn't work.

hello, How can I add the up and down arrows, and esc to close menu

Add http request ??

thanks

Build option list from remote json by ajax

copy / pasted from the example.
on vue v2.1.6

here is the console output (shortened)

[Vue warn]: Error when rendering component <basic-select>: 

vue.runtime.common.js?d43f:2961 Uncaught ReferenceError: _h is not defined

backend.js:1 [vue-devtools] Ready. Detected Vue v2.1.6

using this if it matters
https://github.com/egoist/vuepack

An item should have a text and a value, but it could have other custom properties without interfering with the library's normal behavior.

I want to allow css customizations on some custom property in order to change the color (or any) css property.

I've created a PR that addresses this feature.

When some new options are loaded, the previous selected value is still selected instead of select the first option of the new array.

how to add placeholder for multi select or basic select dropdown?

1. send api url
2. populate options

In my project get user input value. I had try all option.
Please give me any solution.

how to call on-change event ..?

Is there a way to search with Case Insensitive option?

I'm trying to reduce my overall bundle size and noticed this lib uses the full lodash library, consider reducing the dependency size by using the modular parts of lodash you need rather than the entire library if possible :)

Hi @moreta

I have a problem when I'm loading your package.
I'm using gulp, browserify and babelify.

Any idea?

Error: Cannot find module '!!./../../../node_modules/css-loader/index.js!./../../../node_modules/vue-loader/lib/style-rewriter.js?id=data-v-3bdee3a6!./../../../node_modules/vue-loader/lib/selector.js?type=styles&index=1!./ModelSelect.vue' from '/var/www/withpassion/docker-projects/wesele123.local/html/node_modules/vue-search-select/publish'

hello how i can set name for input ? i need use vue-search-select in post method form

Hi, it would be nice to be able to disable the component using a prop, like the :isError

When selecting an option, the width of the select is automatically stretched making my modal in view for telephones disengage a little. This does not happen with any other component and also the options that I select are very short texts.

As you can see there has already stretched the width of the entire modal because of the select

When use one property or custom text to show a label for the options, the item object can have other properties useful for filter, by example, document, email etc. Would be interesting to have the complete object in filterPredicate function, or other way to do this.

When delete one item on multi select,
on-click event fired so option list open.

Option list should be remain closed, when delete item.

options2: [
         { value: '1', text: 'aa' + ' - ' + '1' },
         { value: '2', text: 'ab' + ' - ' + '2' },
         { value: '3', text: 'bc' + ' - ' + '3' },
         { value: '4', text: 'cd' + ' - ' + '4' },
         { value: '5', text: 'de' + ' - ' + '5' }
],
item2: ''

According to the example this should work, however, if I have:

 options2: [
          { value: {a : 1, ...}, text: 'aa' + ' - ' + '1' },
          { value:  {a : 1, ...}, text: 'ab' + ' - ' + '2' },
          { value:  {a : 1, ...}, text: 'bc' + ' - ' + '3' },
          { value:  {a : 1, ...}, text: 'cd' + ' - ' + '4' },
          { value:  {a : 1, ...}, text: 'de' + ' - ' + '5' }
],
item2: {}

if I select 'aa' + ' - ' + '1' I would expect to get {a : 1, ...} as my v-model, but I am getting this { value: {a : 1, ...}, text: 'aa' + ' - ' + '1' }, which is really confusing

The search by default on click shows a populated list. Is there a way to show only the entries related to what a user types, which does happen after the populated list is shown. But I want that populated list must not show by default on clicking in the search field.

Because the buildText method does not check on null value explicitly it fails when the option value has a zero value. This results in the option text have empty strings.

How do I get a handle on the select and choose options in a nightwatch test? model-select does not appear to pass through anything like ID or class that can be used as a selector on either the drop down itself or the options.

Is it possible not to load the semantic-UI css classes?