Filtering Key Presses in Quasar: A Comprehensive Guide

Seeking Assistance

I am looking to integrate an "Arabic keyboard input filtering" using the onkeyup and onkeypress events similar to the example provided in this link.

<input type="text" 
       name="searchBox"
       value=""
       placeholder="بحث"
       size="25"
       onkeypress="if(this.value.match(/[^\u0621-\u063A\u0640-\u0657\u0670\uFE70-\uFEFC]/)) this.value=this.value.replace(/[^\u0621-\u063A\u0640-\u0657\u0670\uFE70-\uFEFC]/g,'')"
       onkeyup="if(this.value.match(/[^\u0621-\u063A\u0640-\u0657\u0670\uFE70-\uFEFC]/)) this.value=this.value.replace(/[^\u0621-\u063A\u0640-\u0657\u0670\uFE70-\uFEFC]/g,'')"
       style="direction: rtl; width: 100px;">

How can I implement the "Arabic keyboard input filtering" feature in the Quasar-Framework component q-search?

Thank you for any assistance provided

javascriptvue.jsvue-componentquasar-framework

Answer №1

Give this a try.

<q-search v-model="value" name="searchBox" placeholder="بحث"  oninput="if(this.value && this.value.match(/[^\u0621-\u063A\u0640-\u0657\u0670\uFE70-\uFEFC]/)) this.value=this.value.replace(/[^\u0621-\u063A\u0640-\u0657\u0670\uFE70-\uFEFC]/g,'')" onkeyup="if(this.value && this.value.match(/[^\u0621-\u063A\u0640-\u0657\u0670\uFE70-\uFEFC]/)) this.value=this.value.replace(/[^\u0621-\u063A\u0640-\u0657\u0670\uFE70-\uFEFC]/g,'')"/>

Answer №2

This inquiry was posted some time back. I will provide a response for rv1+ in case others come across this query later on. I recently created a codepen for lazy loading and filtering. Feel free to check it out here: https://codepen.io/Hawkeye64/pen/abbVqdo

The key focus lies in the implementation of the filterFn function listed below:

    async filterFn (val, update, abort) {
      // Utilize abort() if data retrieval becomes impossible
      if (this.users.length === 0) {
        // Fetch and cache data if unavailable for filtering
        await axios.get('https://jsonplaceholder.typicode.com/users')
          .then(response => {
            this.users = response.data
          })
      }
      if (val === '') {
        update(() => {
          this.options = this.users.map(user => user.username)
        })
      } else if (this.users.length === 0) {
        update(() => {
          this.options = []
        })
      } else {
        update(() => {
          this.options = this.users
            .map(user => user.username)
            .filter(name => {
              return name && name.toLowerCase().indexOf(val.toLowerCase()) !== -1
          })
        })
      }
    },

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

What is the correct way to reuse sub-dependencies using NPM?

This inquiry primarily centers around the usage of react-admin, as indicated by the tags, but could also be applicable in other scenarios. In our case, we are utilizing react-admin which relies on @material-ui/core. This grants us the ability to incorpora ...

javascriptnpmreact-adminpeer-dependencies

Could a commenting feature be seamlessly integrated directly into the video player, accessible with a simple click?

I'm exploring the idea of developing a video player that allows users to add comments directly from the player itself. Imagine this: the typical toolbar at the bottom includes standard features like seek bar, volume control, play/pause buttons, but wi ...

javascriptjqueryflash

Manage Blob data using Ajax request in spring MVC

My current project involves working with Blob data in spring MVC using jquery Ajax calls. Specifically, I am developing a banking application where I need to send an ajax request to retrieve all client details. However, the issue lies in dealing with the ...

javajavascriptajaxjqueryspring-mvc

What is the best way to trigger a jQuery UI dialog using an AJAX request?

My website includes a jQuery UI Dialog that opens a new window when I click the "create new user" button. Is there a way to open this window using an AJAX request? It would be useful if I could open the dialog-form from another page, such as dialog.html ...

javascriptjqueryajaxjquery-ui

What is the method for retrieving the fixed information?

I am currently working on a project that involves creating a course-rating API. We have been given a completed angular application to work with, and our task is to set up the routes without making any changes to the Angular app. One of the initial tasks a ...

javascriptangularjsnode.jsmongodbexpress

How can I identify when a form has been edited in order to update the database with those changes only?

Currently, I have a form with over 50 fields. While I've successfully implemented functionality for inserting, selecting, and deleting records, I'm struggling with updating a record. Specifically, if a user only updates one or two fields out of t ...

javascriptphpangularjs

Tips for incorporating a multiple tag search feature within my image collection using JavaScript?

I am facing a challenge with my image gallery search feature. Currently, users can search for images by typing in the title or tag of an image. However, I need to enhance this functionality to allow for multiple tags to be searched at once. For example, if ...

javascriptjquery

Error: The initial parameter must be a string, Buffer, ArrayBuffer, Array, or Array-like Object. An object type was passed in instead in CryptoJS

In my quest to encrypt and decrypt data in react-native, I embarked on using the crypto node module by incorporating it into my react native project through browserify. While attempting encryption with the code snippet provided below, an error surfaces sta ...

javascriptnode.jsreact-nativeencryptionbrowserify

What is the best way to verify the [routerLink] values displayed from an Angular component string array?

I want to display the [routerLink] values coming from a string array in my Angular component. This is the TypeScript code: import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-header', templateUrl: & ...

javascriptangulartestingkarma-jasmine

Changing component properties using router-view in Vue.js is the recommended approach

Looking to pass a boolean value from a view within a router-view up to the root App.vue and then on to a component in the App.vue. Successfully achieved this, but encountering an error: Received a warning about mutating a prop directly, as it will be over ...

javascriptvue.jsvuejs2vuetify.jsvue-props

Show various error messages depending on the type of error detected

When pulling data from an API, my goal is to handle errors appropriately by displaying custom error messages based on the type of error that occurs. If the response is not okay, I want to throw an error and show its message. However, if there is a network ...

javascript

Issue with rendering React Three JS in the browser

I recently attempted to follow a tutorial at https://www.youtube.com/watch?v=wRmeFtRkF-8 However, upon running my code, all I see is a blank canvas with a black background (as specified in the CSS). Interestingly, I can tell that the canvas is functional ...

javascriptreactjsthree.jsreact-three-fiber

Change glb files to draco glb in the frontend

Can we encode and transform glb files into draco glb format using only frontend technologies (client side)? ...

javascriptthree.js3dwebglgltf

Dynamic fields added using JavaScript are not recognized by PHP

I have a MySQL database where orders are stored along with various activities. My PHP/HTML page retrieves these activities when an order is clicked and allows users to modify them using a form. Upon submission, another PHP file updates the database by loop ...

javascriptphphtmlmysql

Transferring client-side data through server functions in Next.js version 14

I am working on a sample Next.js application that includes a form for submitting usernames to the server using server actions. In addition to the username, I also need to send the timestamp of the form submission. To achieve this, I set up a hidden input f ...

javascriptreactjstypescriptnext.jsserver-action

Dividing the code into a function and invoking it does not produce the desired outcome

Everything seemed to be working perfectly until I attempted to encapsulate the code into a function and call it within my expression. Unfortunately, this approach did not yield the desired results. Functional code: render: function() { return ( ...

javascriptreactjs

What could be causing the issue with converting a Firestore timestamp to a Date object in my Angular app?

Currently, I am developing an Angular project that involves using a FireStore database. However, I have encountered a problem with the setup. Within my Firestore database, I have documents structured like the example shown in this image: The fields start ...

javascriptangulartypescriptfirebasegoogle-cloud-firestore

continuously repeating css text animation

How do I create an animation loop that slides infinitely, repeating non-stop in full screen without breaking at 'hello5'? I want to display 3 rows of the same item from my items array. Not sure which CSS is causing the issue. The result I am loo ...

htmlcssvue.js

What is the method for setting a default value for a disabled input?

<input type="checkbox" disabled="disabled" checked="checked" name="is_ok" id="id_is_ok"/> Is there a way to set a default value for this disabled input? I've noticed that if this field is disabled and I make edits to my data, the changes are n ...

javascripthtml

The attempt to execute 'removeChild' on 'Node' was unsuccessful because parameter 1 is not the correct type. Although it did remove the elements from the DOM, it only did so once

It's quite a challenge I'm facing!!! Although there have been similar questions asked before, they were all for specific scenarios. I am currently developing a tictactoe game using the module design pattern. The function below helps me create tw ...

javascriptcssreactjsdomfrontend