Opting out of accents in the Vue filter and utilizing the table filter feature provided by Bootstrap-Vue

I am currently utilizing the Bootstrap-vue Table for filtering purposes, and I require assistance in implementing a regex filter to exclude words or letters with accents.

Here is the regex snippet:

string.replace('/[áàãâä]/ui', 'a');
string.replace('/[éèêë]/ui', 'e');
string.replace('/[íìîï]/ui', 'i');
string.replace('/[óòõôö]/ui', 'o');
string.replace('/[úùûü]/ui', 'u');
string.replace('/[ç]/ui', 'c');

User input field:

<b-form-input
                id="filter-input"
                v-model="filter"
                type="search"
                placeholder="Search by Zone, WhatsApp, or Email"
              ></b-form-input>

Data Table setup:

<b-table :items="items"
                   :fields="fields"
                   :filter="filter"
                   hover
                   striped>
            <template #cell(whatsapp)="data">
              <span v-html="data.value"></span>
            </template>
            <template #cell(email)="data">
              <span v-html="data.value"></span>
            </template>
</b-table>

Vue filter line configuration:

filter: null,

My query is focused on integrating the regex filter into the Bootstrap-vue table filter - is this achievable?

Answer №1

To enhance your searching capabilities, consider implementing a computed property that generates a regular expression based on the filter input, replacing plain letters with their accented variations:

export default {
  computed: {
    computedFilter() {
      const pattern = this.filter
          .replace(/a/g, '[aáàãâä]')
          .replace(/e/g, '[eéèêë]')
          .replace(/i/g, '[iíìîï]')
          .replace(/o/g, '[oóòõôö]')
          .replace(/u/g, '[uúùûü]')
          .replace(/c/g, '[cç]')
      return new RegExp(pattern, 'ui')
    }
  }
}

Afterwards, apply the computed property in your template like so:

<b-table :filter="computedFilter">

Check out a demo here!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible for Skycons to show a duplicate icon?

My current issue involves integrating the JavaScript plugin "Skycons" with the Yahoo weather RSS feed. The problem arises when multiple days have the same weather forecast, as the plugin retrieves icons based on ID rather than class. This prevents me from ...

How do I create more space in Vitepress to prevent the text from feeling cramped and allow it to display in a larger area?

Below is the content of my index.md file: --- # https://vitepress.dev/reference/default-theme-home-page layout: home hero: name: "TP2" text: "Analyzing the code of TP2 by Breno Mazzali Medeiros Tomazelli and Philippe Bouchard" ta ...

Animating jQuery to adjust height based on a percentage

My animation using percentage is not working as expected. It expands to the whole height instantly instead of smoothly transitioning to 100%. Here is my CSS code: #block-views{ overflow:hidden; height:20px; } This is my HTML code: <div id="block-view ...

What is the best way to transfer a value from a function to a variable in VueJs?

Currently, I am receiving the base64 of an image URL. When passing the getImage function to the savepdf function and attempting to store the callback function's base64_data in a variable, an error is thrown: An error occurs - Cannot set property &a ...

Converting a child.jsp file into a modal or overlay using JavaScript: A step-by-step guide

Is it possible to call a child.jsp as a model using JavaScript? I previously accessed the child jsp using showmodaldialog and window.open() with JavaScript, but it opens in another window. I want the child jsp to appear in a modal or overlay view. Can some ...

ES6 Class Directive for Angular 1.4

I am currently exploring the possibility of incorporating a directive from version 1.4 and adapting it to resemble a 1.5 component. By utilizing bindToController and controllerAs, I aim to integrate the controller within my directive rather than using a se ...

Refresh the page with user input after a button is clicked without reloading the entire page, using Python Flask

My python/flask web page accepts user input and returns it back to the user without reloading the page. Instead of using a POST request, I have implemented Ajax/JavaScript to handle user input, process it through flask in python, and display the result to ...

What is the purpose of using square brackets in the angular.module() function in AngularJS?

const myapp=angular.module('myApp',[]); As someone venturing into the realm of angularjs, I have a question. What is the significance of using [] in angular.module()? If anyone could shed some light on this, it would be greatly appreciated. ...

Adjust the anchor tag content when a div is clicked

I have a list where each item is assigned a unique ID. I have written the HTML structure for a single item as follows: The structure looks like this: <div id='33496'> <div class='event_content'>..... <div>. ...

Angular encountered an issue while attempting to access the property 'results' of an undefined value

I've got the code functioning perfectly, but for some reason I'm not getting any errors in the console log. It seems like I can't access results from an indefinite property. Any ideas on what could be causing this issue? I'm trying to m ...

I experienced an issue with Firestore where updating just one data field in a document caused all the other data to be wiped out and replaced with empty Strings

When updating data in my Firestore document, I find myself inputting each individual piece of data. If I try to edit the tag number, it ends up overwriting the contract number with an empty string, and vice versa. This issue seems to stem from the way th ...

The async and await functions do not necessarily wait for one another

I am working with Typescript and have the following code: import sql = require("mssql"); const config: sql.config = {.... } const connect = async() => { return new Promise((resolve, reject) => { new sql.ConnectionPool(config).connect((e ...

What is the recommended way of inserting new data into a table in vue.js?

Is it possible to update the table data whenever I want, even after initializing the Vue instances? I've attempted to use the following methods but the data is still not updating: ・$nextTick ・$set <script> var overall = new Vue({ ...

Using jQuery UI to trigger Highlight/Error animations

Apologies if this question seems obvious, but I can't seem to find a clear answer anywhere... Is there a way to add a highlight/error message similar to the ones on the bottom right of this page: http://jqueryui.com/themeroller/ by simply using a jQu ...

Optimizing Google e2e testing using Protractor

Improving login efficiency is necessary to enhance the speed of executing e2e tests. At present, after every test, the Chrome browser shuts down, requiring a new login session for each subsequent test. What changes can be made to address this issue? Any ...

Having trouble with the sleep function in nodejs?

Hey there! I'm currently working on a Node.js function that sends requests using array.map. However, I'm facing a challenge with making the function wait for 4 minutes when an error occurs before sending the next request. I've attempted to u ...

Struggling to make image uploading function with Flask and JQuery

Utilize the code snippet below to submit forms and retrieve a modified version of text from Flask using AJAX and JQuery: from flask import Flask, render_template, request, jsonify app = Flask(__name__) @app.route('/') def index(): return re ...

Extract information from a database table for presentation as simple text

I am looking to extract information from each row and display it as plain text on the same page within a paragraph. Here is an example table for reference: <table> <thead> <tr> <th class="a header">A</th ...

extract the information from a specific div on a different website using JavaScript

My goal is to load a specific div with a class="container" from a website and extract its content into my application. Upon making an ajax call to retrieve the site's data, I encountered a cross-domain origin error since I don't have access to t ...

Revealed the previously hidden private variables within the Revealing Module Pattern

I have encountered an issue while implementing the Revealing Module Pattern, as I am struggling to expose a modified private property. var myRevealingModule = (function(){ var name = 'Samantha'; function updateName () { name = ...