I have developed an app that utilizes JavaScript and the VueJS framework. I am currently working on implementing a 'dropdown' feature for items that are dynamically filtered based on user input.
Below is the code snippet responsible for rendering the list 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>
The method used to generate userInputedFormulas is shown below:
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;
}
It's important to note that allFormulas returns an array of objects containing various formulas like: [{name: 'SUM', structure: 'blah'},{name: 'ADD', structure: 'blah'},{name: 'MINUS', structure: 'blah'}]
The current functionality allows for filtering as the user types, as demonstrated in the following screenshot:
https://i.sstatic.net/1w1hL.png
However, there is a specific scenario where I want to refine the filter using characters such as ( (round opening bracket) to display only the exact formula.
For instance, if the user inputs 'SUM(' instead of displaying all items with 'SUM' in the name as shown above, it should only display the 'SUM' item. How can I achieve this specific filtering requirement as I'm unsure about the approach?