setting minimumlength

[guyvanbael]

Hi,
Is it possible to set the minimum length of the input string?

[javve]

You can write your own search listener using the listObj.search() method: https://listjs.com/api/#search

For further usage questions I recommend Stack Overflow: https://stackoverflow.com/questions/tagged/list.js

[javve]

Oh, sorry, I should have started with: No, that's not a feature that is included in the core.

[JZL]

I can include code if it would be helpful (or a PR although I'm not sure it's production quality) but I set up a debounce timer within the search function and if the search string is less than 3 charatcers, it waits a few hundred milliseconds to see if the user will add more characters before starting the search. I was searching a somewhat long list (~800) and, especially on mobile, it dramatically improved performance without much of a noticeable pause

Also @javve I've been watching this repo and your christmas overhaul is very impressive, thanks!

[javve]

When you mention it, it actually sounds like a reasonable thing to add to List.js core. You're not the first one to mention it.

I'm not sure if I want it to be the default behaviour or not so I think you can wait a bit before doing the PR. However I really appreciate the offer!

...and I'll reference #635 here where I collect all search related issues and feature request. I'll also add search debounce to the newly created WISHLIST.md

I'm really glad that you noticed my updates ❤️

[QasimK]

I have a list of several thousand rows, and searching without debouncing pretty much locks up the page on my desktop 😄. I will manually implement it, but I think it would be a good (optional?) feature to have by default.

[puremana]

Not the best way to do it, but here is how I did it using the search method javve referenced.

Remove the search class from your search input to remove automatic searching and add an id. In this example my id is tagSearch

Then in JavaScript you can do something like...

    var options = {
        valueNames: [ 'name' ]
    };
    var tagList = new List('tag-list', options);
    
    $('#tagSearch').keyup(function (e) {
        if (e.target.value.length > 2) {
            tagList.search(e.target.value);
        } else {
            tagList.visibleItems.forEach(i => i.hide())
        }
    })

[ganesh-rao]

I can confirm that this works and I've found it very useful.

See below for non-jQuery way incase someone wants this in vanilla JS. I've commented inline incase it's useful.

var options = {
    valueNames: [ 'name' ]
};

var userList = new List('tag-list', , options, values);

// listen for search input, remember to change input tag class to something other than default 'search'
document.getElementById("dataSearch").addEventListener('input', minMaxCharacters);

// only begin search when 4 characters have been entered
function minMaxCharacters(e) {
  if (e.target.value.length == 4) { // Change expression to your preference
      userList.search(e.target.value);
  } else {
      userList.visibleItems.forEach(i => i.hide()) // hides search results incase of no match with above expression
  }
}