Suggestion: enter minimum number of characters before searching

[wildhart]

I have another suggestion.

With a very long list of options (or with an Ajax call), and with only one or two characters entered the filtered results can still be long and meaningless.

I have managed to delay the search until you enter at least 3 characters by simulating Ajax:

<treeselect v-model="mapZone" @input="changeMap" :open-on-click="false"
    async :load-options="searchMapZone" retry-text=""
    clear-on-select placeholder="Change Map or Zone..."/>
</treeselect>

searchMapZone: function({action, searchQuery, callback}) {
    if (searchQuery.length<3) return callback('Please keep typing...', []);
    searchQuery = searchQuery.toLowerCase();
    callback(null, this.mapsZones.filter(function(item) {
        return item.label.toLowerCase().indexOf(searchQuery)!=-1;
    }));
},

It would be nice to have a build-in prop :min-chars="3" to require a minimum number of characters before the list is searched/displayed.

Thank you for making this awesome module available!

[warrenspe]

Adding to this,

I spent quite a bit of time trying to get the above solution working for us, but because of differences in how async mode works (most notably performance issues caused by: #189, as well as the fact that the search results come out flat) I had to go with a more intrusive solution.

    /*  Function which wraps the default search routine, implementing a minimum search length and showing
     *  a message to users if their query is below that length
     *
     *  Inputs: treeApp - The vue treeselect instance to wrap the search routine of.
     */
    function injectSearchWrapper(treeApp) {
        var initialHandleLocalSearch = treeApp.$refs.treeselect.handleLocalSearch;
        treeApp.$refs.treeselect.handleLocalSearch = function() {
            var searchQuery = this.trigger.searchQuery;
            this.rootOptionsStates.loadingError = "";

            if (searchQuery.length && searchQuery.length < this.$attrs["min-search-length"]) {
                this.rootOptionsStates.loadingError = (
                    "Please enter at least " + this.$attrs["min-search-length"] + " characters to search."
                );
            } else {
                initialHandleLocalSearch.call(this);
            }
        };
    }

        <treeselect
            ref="treeselect"
            :min-search-length="..."
            retry-text=""
            ...
        </treeselect>

[morganzysman]

Adding to this,

I spent quite a bit of time trying to get the above solution working for us, but because of differences in how async mode works (most notably performance issues caused by: #189, as well as the fact that the search results come out flat) I had to go with a more intrusive solution.

    /*  Function which wraps the default search routine, implementing a minimum search length and showing
     *  a message to users if their query is below that length
     *
     *  Inputs: treeApp - The vue treeselect instance to wrap the search routine of.
     */
    function injectSearchWrapper(treeApp) {
        var initialHandleLocalSearch = treeApp.$refs.treeselect.handleLocalSearch;
        treeApp.$refs.treeselect.handleLocalSearch = function() {
            var searchQuery = this.trigger.searchQuery;
            this.rootOptionsStates.loadingError = "";

            if (searchQuery.length && searchQuery.length < this.$attrs["min-search-length"]) {
                this.rootOptionsStates.loadingError = (
                    "Please enter at least " + this.$attrs["min-search-length"] + " characters to search."
                );
            } else {
                initialHandleLocalSearch.call(this);
            }
        };
    }

        <treeselect
            ref="treeselect"
            :min-search-length="..."
            retry-text=""
            ...
        </treeselect>

Hi, did you send a PR for this ?

[warrenspe]

Hey @morganzysman

I have not; I may make a note to take a look at doing that at some point, but not sure when I'll be able get to it. If anyone wishes to take that on in the meantime, be my guest

Warren