No results found message

[mudassir0909]

When user searches for something I'd like to show some help text "No items found that match your criteria" or something, is it possible by default or should I write my own selectize plugin for that ?

Similar to this

Actually right now I've implemented a plugin to do this, but it seems like a ugly patch. I'd rather have this built in the library instead.

[oscarotero]

👍

[bkosborne]

👍

[bkosborne]

@mudassir0909 I'm wondering if you can post your plugin code for this? I'm trying to do the same

[mudassir0909]

@bkosborne Here you go https://gist.github.com/mudassir0909/2d5c50a411829733d547

[bkosborne]

@mudassir0909 Thanks. I created a slightly modified version: https://gist.github.com/bkosborne/56ee6a6559ac66d64490

I load my options dynamically with AJAX. On the "success" AJAX callback, I check if the server returned any responses. If not, I call displayEmptyResultsMessage

[antitoxic]

@bkosborne I've played around with your code and came up with this:
https://gist.github.com/antitoxic/9156ae5a4531fce46ad1

This handles show/hide automatically and renders in the default dropdown so that less html, dom manipulation and styling is needed.

[thiago-negri]

@bkosborne Thanks for your time into this. It worked for me.

I've extended your version a bit to display the "no results" box when the search is already loaded (in cache). Selectize don't call my load function, so I can't call displayEmptyResultsMessage to display the box. So, I've added a listener to type event as:

    self.on('type', function(str) {
        if (self.loadedSearches[str] && !self.hasOptions) {
            self.displayEmptyResultsMessage();
        } else {
            self.$empty_results_container.hide();
        }
    });

Full gist here: https://gist.github.com/thiago-negri/132bf33b5312e2da823c

[ingro]

This would be awesome, it's a much needed function!

@thiago-negri I tried to use your plugin code but with ho success, I can see that a DIV with "No results found" has been added to the selectize input but it fails to appear, there are other steps to enable it? That's how I'm using it, thanks for the help!

    $('#search').selectize({
        plugins: ['no_results'],
        create: false,
        maxItems: 1,
        searchField: 'name',
        valueField: 'id',
        labelField: 'name',
        load: function(query, cb) {
            if (!query.length) {
                return cb();
            }

            $.ajax({
                url: basePath + '/api/search/' + query,
                type: 'GET',
                error: function() {
                    cb();
                },
                success: function(res) {
                    cb(res);
                }
            });
        }
    });

EDIT: nevermind, I figured out I must call this.$empty_results_container.show(); manually inside my ajax's success callback. Thanks for your plugin!

[feugen24]

@thiago-negri
for it to work i changed to

if (!self.loadedSearches[str] && !self.hasOptions) { //notice "not" in first expression

still the code won't work if source is loaded by remote call, since it will first show "no results" then display them after it gets from server

I used instead

$select[0].selectize.$empty_results_container.show();

[KenStipek]

I changed the self.on method to the following to include the query typed in the message. I also removed the text from the options:

    self.on('type', function(str) {
        var message = '"' + self.lastQuery + '" is not valid'
        if (!self.hasOptions) {
            self.$empty_results_container.text(message).show();
        } else {
            self.$empty_results_container.hide();
        }
    });

[mininglink]

@KenStipek I have implemented your method

I need to show a link to click if there is no results

but changed the line show a link, but it goes away when click, i assume prevent default, but how do we force a click here

self.$empty_results_container.html(message).show();

got this working by using onmousedown for regular browsers with a mouse and touchstart for touch devices

click here to go to where ever';

[KenStipek]

@mininglink I'm sorry, I don't know :(

[kalfalasi]

Hi @KenStipek @mudassir0909 how did you guys make it to work?

[mudassir0909]

@alfalasii Make what work? If you are here to display "No results message" then this gist should be fine https://gist.github.com/mudassir0909/2d5c50a411829733d547 (I already pasted it above but adding for the convenience)