javascript function to search like in vscode files

Question

I'm trying to understand how to make a dropdown search function in javscript that works like file-search CTRL+P in vscode. The search query to be automatically including wildcards.
For example i type inds and vscode finds index.js file. How to make something similar in javscript using indexOf for example?

Thank you

Could you please add some code to understand the question better? — reymon359, May 25 '20 at 14:25
there is plenty of solutions out there. so far i cannot pin point you to even one because i don't know what you actually need. clearly a X Y problem here. you might want to check out https://quilljs.com/ https://select2.org/ https://slatejs.org/ or others for inspiration though. — GottZ, May 25 '20 at 14:29

score 4 · Accepted Answer · answered May 25 '20 at 15:03

4

What you are looking for is called fuzzy finders. You can find a lot of packages out there just by googling it.

Fuzzy searching allows for flexibly matching a string with partial input, useful for filtering data very quickly based on lightweight user input.

E.g:

answered May 25 '20 at 15:03

Eugene Obrezkov

2,910
2
17
34

thank you very much. Now I remember the "fuzzy search" term! – Kiril Lukiyan May 26 '20 at 20:07
You can also check out [vscode-fuzzy-scorer](https://github.com/goliney/vscode-fuzzy-scorer). It's literally a rip-off of vscode's algorithms. I copy-pasted it, cleaned and published it as an individual package. – Serhii Holinei Oct 11 '21 at 19:51

RobertoNovelo · Answer 2 · 2021-12-02T07:30:56.450

Here's a quick hack to imitate VSC fuzzy finder (symbol search, file search, etc.):

function fuzzyFindInArray(words, searchTerm = "") {
  if (!searchTerm) {
    return words;
  }
  const regex = new RegExp(`${searchTerm.split("").join("+?.*")}`, "i");
  return words.filter((word) => regex.test(word));
}

const words = ["hello", "yellow", "lower"];

console.log("eo", fuzzyFindInArray(words, "eo"));
console.log("lo", fuzzyFindInArray(words, "lo"));
console.log("ho", fuzzyFindInArray(words, "ho"));
console.log("y", fuzzyFindInArray(words, "y"));
console.log("low", fuzzyFindInArray(words, "low"));
console.log("e", fuzzyFindInArray(words, "e"));

I have not benchmarked performance on the following function, since I am using it with small-ish arrays (hundreds of items). Also, results are not sorted, and would need something like RegExp groups to highlight matched letters (regex approach).

CanUver · Answer 3 · 2020-05-25T15:09:54.380

It won't be long before we encode it. So I'd like to tell you the simplest way to use the algorithm. It can give you an idea and help you get it in your head. If you want to do them only with vanilla javascript without using any library:

Html and Css:

1 -Create the search screen with HTML css.

2 -Edit and display none with css in which position and where you want the search screen to appear on the screen.

Javascript:

3 - Use keyup or keydown events to press the same key on the window you are using. ( You can check here How to detect if multiple keys are pressed at once using JavaScript? )

4 -make the display block of the call screen when the same key is pressed.

5 -after the search screen opens, write a function about how the search should be.

6 -in this section, you can use index of or similar search methods to display block if there is an item, and display none if there is no item.

This is the simplest basic algorithm I've ever written. If you try and fail, please write. I'd like to examine it. Good Luck!

javascript function to search like in vscode files

3 Answers3