search min characters

[hakankoralturk]

How do I get the search to start when I type a minimum of 3 characters? Or more. I didn't find anything like min-length.

[kiran94]

Any update here?

[diogolessa]

+1 this is an important one... 👍

[tfpdeveloper]

+1

[mattlee1]

Hi everyone,

Just wanted to offer a somewhat hacky solution for this. You can set @results="showResults" on the autocomplete component and then add a method called showResults with this inside it, just change the .length condition to check for the min chars you want. I used jquery but it could easily be done with vanilla js as well.

  showResults(){
            
                this.$nextTick(()=>{
                    if($('.autocomplete__inputs input[type=text]').val().length===0){
                        $('.autocomplete__results').hide()
                    }
                    else
                        $('.autocomplete__results').show()
                })
            
           
        }

[vitaliss]

+1

[de-raaf-media]

Hi,

Very nice library. Would be even nicer if the minimum input would be configurable.

Another hacky solution is making the endpoint dynamic. The loading icon is still visible. And you could extend this by making 3 dynamic and show a message when the input length is below this number. My purpose is limiting the api calls by the way so this works for me (for now):

        `:source="endpoint"`

then add the method

        ```endpoint: function(input) {

            if (input.length < 3) {

                return false;

            }

            return 'https://{{Your_Endpoint}}?key={{Your_Api_Key}}&q=' + input
        },```

Finally hide the error message (in my case I put it in the styles block of my single file component:

    .autocomplete__results__item--error {
        display: none;
    }