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

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

• javascript
• visual-studio-code

Share Improve this question Follow asked May 25, 2020 at 14:23 Kiril LukiyanKiril Lukiyan 18722 silver badges1313 bronze badges 3

• Could you please add some code to understand the question better? – reymon359 Commented May 25, 2020 at 14:25
• Is this in a browser context? – trincot Commented May 25, 2020 at 14:27
• 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 quilljs. select2 slatejs or others for inspiration though. – GottZ Commented May 25, 2020 at 14:29

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

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:

• Fuse.js
• Fuzzysearch
• etc

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).

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!