搜索对象值数组的最有效方法

Question

I have an onChange function that is called each time a user enters something into a text field. The idea is to autocomplete or provide a list of options that contain the text the user has entered, and let them choose from the returned options. Here is what I have:

dataSet.filter(option => option.label.toLowerCase().indexOf(input.toLowerCase()) !== -1);

dataSet would look something like this, and could have thousands of elements:

[
  {
    label: "I'm typing this",
    value: "1234567890"
  },
]

What would be a better, more efficient approach, without getting too crazy?

Answer 1

You can use debounce as explained in this post for that.

// Returns a function, that, as long as it continues to be invoked, will not be triggered. The function will be called after it stops being called for N milliseconds. If immediate is passed, trigger the function on the leading edge, instead of the trailing.

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

You can benefit from it like- Instead of calling onChange on every keystroke it will call only after a certain milliseconds have passed which you can set in the debounce function.

And you can use it like

var myEfficientFn = debounce(onChange, 400);

So if the user have stopped typing for 400ms than only it will call the onChange function instead of in every keystroke.