Slim Select based on ajax result

[ARORoele]

Hello,

Info :
I would like to use the slim select combined with ajax results.
The reason i do an ajax request is because i have several 1000 records based on a different input field(country selection).

Situation :
Event : " .find('input').on('keyup',...)"
Execute : Ajax call -> change options

Problem :
The select has a "ss-list" with all the options, these have a "data-ID".
I always do a ".setData" when any "keyup" event happens in the input from the select, because of this all the "data-ID" are always different (I will ofc only do this request at +- 3 char).
The mayor issue that i have at the moment is that the slim-select is not synced with itself.
I mean that it seems that the slim-select has like an array that has all the data-ID and this sync on every keyCode with a CHAR but after a change i update it with the return value with my ajax results.
So the js values are always 1 step behind the html values, atleast that's how it feels.

Example
1 ) 1 option -> data-ID = 100;data-ID = 110;
2) Extra key input "a"
3) Select syncs, data-ID = 100;data-ID = 110;
4) Ajax request (input field has changed)
5) Setdata, data-ID changes in the list -> data-ID = 200;data-ID = 210
6) Choose value, option 200 -> list = 200, select = 100
7) Result -> 200 is not known so "null" has been selected
8) Open search field
9) Select syncs -> data-ID = 200;data-ID = 210
10) Choose value -> list = 200, select = 200
11) Result -> 200 is known so return selected value the "span"

Conclusion
It seems like the slim-select always syncs on a change (visible key) or open/close.
Can i maybe call this function after my ".setData" so the ss-list syncs with the js data?

Greetings aro

[brianvoe]

Thank you for pointing this out. I have wanted to do an ajax example/adjustment to make it work. Ill put some time into it soon and update you when im done.

Do you have a deadline you need to hit?

[ghost]

Hey there,

Juste shiming in to say that this vanilla select is the neatest I found so far, I would love to use it and this syncing problem is the one thing keeping me from doing so.

Thanks for the great work.

[brianvoe]

Sounds good. ill get on this update soon.

[ARORoele]

Thx for responding so quickly.
It would be great if you would implement/review this situation (and that i was not entirely mistaken).
My deadline is at the 1st of April.
Are you willing to put time and effort in this in the upcoming weeks or is this not possible?
I will keep a closer eye on this post so i can respond quicker next time.
If i need to give screenshots to give you a better insight for the issue then you can always ask that.

[brianvoe]

Anything you can send me visually to help me understand your needs would be great. In any case like i said before I will try to implement a way to easily integrate ajax ability.

[ARORoele]

Ok , You can expect this tomorrow.

[brianvoe]

👍

[ARORoele]

Ok, i made a test example to explain in a visible way.
You will find it @ https://imgur.com/a/Gvk7r (8 screenshots).
So on each keyup (except arrow keys and enter) i do an ajax call, the result is set via "searchSelect.setData(returnData);"

Later on there will be an extra statement that the ajax call will only happen at 3 char but not to point out our "problem".
If for example i did the 3 char statement then the select worked if the user pressed 4 char since it was synced again, since the ss-list is 1 step behind and there would be no ajax call at 4 char.

Could it be possible to make an extra sync in setData (simulating keychange) so the SS-list is not 1 step behind?
Perhaps an extra paramater , setData(date,extraSync) -> extraSync true/false , default false.

At this moment you have a "onchange" and "beforeonchange" in the select but would be create if there would be an "onchangeinput".
Since onchange is looking at the option status at this moment (option change).

I hope this helps abit :) .

[ARORoele]

Also i receive the following error (https://imgur.com/a/wFC3i) when i reopen the select (screenshot 7, action: open select).
This is related to the "null" that i explain at screenshot 6(-> result "null")

[brianvoe]

I see what you are talking about now. Thanks for this. I put a good amount of work into it over the last couple of days and will hopefully be able to wrap this up fairly soon. Ill let you know once im done. Or at least let you know when you can test it out to make sure it works for your needs.

Thanks!

[ARORoele]

Extra method suggestion ('setSearchText').

Info:
searchText has now the default text 'No results'.
I would like to override this at every char input and when i receive no results from the ajax call.

Reason:
I would like to let the user know how many character are still needed before the system will receive data (ajax call).

Example:
User pressed 2 characters but the ajax call will only be triggered at 5 char then i would like to say "3 more characters are required" or something in that context.

Conclusion
This is ofcourse an opinion maybe you can place it in the placeholder or above the select.
Maybe you don't even like the suggestion at all :) .

[brianvoe]

I like it. It would be easy to add and would give some additional info on whats going on.

[khoapercy]

Hi brianvoe
Slim can use select all by check box like bootstrap-multiselect ??

[brianvoe]

@khoapercy slim select doesnt use checkboxes.

[ARORoele]

Do you think you will be able to implement this before the 1st of april.
Not that i want to put pressure on this but i would like to know if this will be implemented by then else i need to do some changes.

[brianvoe]

Sorry things have been super busy. im 80% there ill try to wrap it up soon. definitely before april 1st

[brianvoe]

Ok I completed the addition of ajax implementation. See docs options for example usage. v1.12.0

Let me know if you have any questions or issues you come across.

Thanks!

[ARORoele]

Thx, i will try it today/tomorrow and give you feedback.

[ARORoele]

ok, i did a small test and i have a remark (without screenshots)

At this moment you can have 3 options for the callback if i am correctly.

• false (Prevent everything)
• String ("placeholder")
• object (multiple data rows)

My remark is for the "false" option.

Example:
The select will only do a fetch request at 4 char.
So we type "test" in our slim-select.
The data rows that we receive are {"testor","testar","testur"}.
Let's say we type a 5th char "o" so our search input field is "testo".
The slim-select already has the data so a new fetch request should not be required.
So i would like to have only 1 option remaining "testor", which is the normal functionality of the slim-select.
At this moment "false" blocks everything so if i type "testo" then i still see the 3 options

So what i propose is that if false is given to the callback that the slim-select behaves normal.
Ofcourse this is only my opinion and you can decide about this.
But be aware that i am very happy with this implementation.

[brianvoe]

So whether or not you do the fetch is up to you. The ajax function just give you the search and a callback function to use if you want to pass in values that you fetch.

new SlimSelect({
  select: '#select',
  ajax: function (search, callback) {
    // Do whatever you need to here

    // If you decide to do a fetch, then you can use the callback function to pass your data or a message you want to display
    callback('I found no results')
    // or
    callback(data)
  }
})

[ARORoele]

Sorry for not responding for a while.
Btw thx for implementing this.
I had some smaller issues but i worked around it (I will tell them in a new post in the upcoming weeks).
I gave you a star aswell :)

[brianvoe]

👍 Thanks!