How to filter through an array depending on user input in Javascript?

Question

I have an app which uses Javascript and the VueJS framework. I am attempting to create a 'dropdown' of items which are filtered depending on what the user types.

Here is the code for how the list is rendered on the page:

<div>
 <v-list v-for="item in userInputedFormulas" :key="item.id" >
 <v-list-item>
 <v-list-item-title>
 {{ item.name }} {{ item.structure }}
 </v-list-item-title>
 </v-list-item>
 </v-list>
</div>

Here is the method for how userInputedFormulas is generated:

userInputedFormulas() {
 this.userInput.forEach(element => {
 if(this.allFormulas?.filter(formula => formula.name.includes(element.toLowerCase()))) {
 filteredList = this.allFormulas?.filter( 
 formula => formula.name.includes(this.userInput)
 );
 } if(this.userInput == this.allFormulas?.filter(formula => formula.name)) {
 filteredList = this.allFormulas?.filter(formula => formula.name = this.userInput)
 }
 });
 return filteredList;
}

Note that allFormulas basically returns an array of objects of all formulas e.g. [{name: 'SUM', structure: 'blah'},{name: 'ADD', structure: 'blah'},{name: 'MINUS', structure: 'blah'}]

It works in a sense that it filters through the list of 'formulas' like so whilst the user is typing:

enter image description here

However, when the user types in the character ( - round opening bracket - I want to filter it so that it only shows the exact formula.

For example is the user types 'SUM(' then instead of the picture above where it shows all items which have 'SUM' in the name, it should only show the 'SUM' item. How might I be able to filter this as I am unsure of how to go further?

Answer 1

Couldn't you match the search query with a regular expression and if there is a round opening bracket present, you switch the functionality from array filtering to finding just the one that's right?

Answer 2

I can see two options:

Option A: I assume your regex looks like this (simplified): ^(TERM)/gm. If the user enters a ( you could change the regex to ^(TERM)$/gm replacing the bracket with a dollar sign to force the regex to evaluate the whole term, not only parts of it.

Option B: A more clean approach would be to define a regex for each result item and to use this specific regex to evaluate the search term, e.g. something like this for the SUM function: ^SUM(\(([\d,\s]+\))?)?/gm (Disclaimer: i am no regex-experts)