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

Python script for extracting content from web pages that are loaded dynamically

I am facing an issue with extracting content from a webpage on my website. Despite trying to use selenium and clicking buttons, I have not been successful. #!/usr/bin/env python from contextlib import closing from selenium.webdriver import Firefox import ...

javascriptjquerypythonhtmlselenium

Error in the Angular-UI calendar

I'm encountering an issue while trying to set up the angular-ui calendar. When I run it, I get the following error: TypeError: undefined is not a function at Object.eventsWatcher.onChanged (http://localhost/fisioGest/js/calendar.js:262:41) Despite b ...

javascriptjqueryangularjsfullcalendarangular-ui

Issues encountered while trying to open and close a div using jQuery

.box-one { border: 0.1em solid #ccc; } .dropdown-info { display: none; } <div class="box-one"> <div class="header"> <h3 class="text-center">Sample Header</h3> </div> <div class="dropdown-info"> <p ...

javascriptjquery

Next JS encountered an error - Error [ERR_HTTP_HEADERS_SENT]: It is not possible to set headers after they have already been sent to the

Having crafted a serverless application using next.js, Vercel, and Google Sheets to store customer contact data, I encountered an issue post-deployment. While my application works flawlessly locally, after deployment, I started receiving the following erro ...

javascriptgoogle-sheetsnext.jsreact-hook-form

Using Regular Expressions to eliminate any characters that are not directly adjacent to numbers (beside specific characters)

My function generates a result that looks like this: given output For comparison, consider the example string below: var string = '    111   1   1\n 1111111 1 \n   &nb ...

javascriptjqueryarraysregexstring

What is the best way to safely distribute the same npm package with multiple contributors?

Imagine a collaborative open source project with multiple contributors working on it. As the project progresses, these contributors need to publish their work to the NPM registry. But how can this be done securely when multiple people are involved? The ow ...

javascriptnpmopen-source

The functionality of res.send is not working correctly

Attempting to send a response from my express application to the front-end in order to display an alert. Here is what I have attempted in my app: if (info.messageId) { res.redirect('back'); res.send({ success: true }); } ...

javascriptnode.jsexpress

Ways to implement JavaScript code in Angular 7 application

I am attempting to create a collapsible navigation bar using MaterializeCSS for mobile screens and I plan to incorporate JavaScript code into it. Can you advise where I should place this JavaScript code? Below is the snippet of code that I intend to inclu ...

javascriptjqueryangularmaterializeangular7

Updates to props values are not being reflected in the React js application running on the webpack

I keep facing an issue where I have to restart the webpack server every time I try to pass or update props values from parent to child components. It's frustrating that the props values are not updating even after saving the file. Take a look at my p ...

javascriptreactjsfrontend

The jQuery .hasClass() function does not work properly with SVG elements

I am working with a group of SVG elements that are assigned the classes node and link. My goal is to determine whether an element contains either the node or link class when hovering over any of the SVG components. However, I am encountering an issue where ...

javascriptjqueryhtmlcsssvg

Use jQuery to create a price filter that dynamically sets slide values based on the filter object

I'm currently utilizing the jQuery slide filter to sort products based on price. The filtering value is set within the script, but I am interested in dynamically setting it based on the highest/lowest number found on my page using a data attribute. D ...

javascriptjqueryhtml

Error: The object being referenced (scope.awesomeThings) is undefined and unable to be evaluated

Each time I run the grunt test command, I encounter this error. I set up a project using yo angular and attempted to execute the example code provided in Yeoman's scaffold. Something seems to have gone awry here - below is the code snippet that I trie ...

javascriptangularjsgruntjskarma-jasmineyeoman-generator-angular

What is the best way to display the JSON data?

<!DOCTYPE HTML> <html> <head> <title></title> <link href="/bundles/hoaxpartner/css/style.css" type="text/css" rel="stylesheet" /> </head> <body> <div id="header">Backbone</div> &l ...

javascriptjsonbackbone.js

existing event handler in JavaScript has already been registered on a particular plugin

Apologies for the confusing title, will make changes accordingly.. Currently, I am utilizing the Twitter Bootstrap Wizard to manage database operations. My goal is to find a way to activate the onTabShow() function by simply clicking a button. The onTabSh ...

javascriptjquerytwitter-bootstrap

Undefined output in Typescript recursion function

When working with the recursion function in TypeScript/JavaScript, I have encountered a tricky situation involving the 'this' context. Even though I attempted to use arrow functions to avoid context changes, I found that it still did not work as ...

javascripttypescriptrecursion

Choosing a specific category to display in a list format with a load more button for easier navigation

Things were supposed to be straightforward, but unexpected behaviors are popping up all over the place! I have a structured list like this XHTML <ul class = "query-list"> <li class="query"> something </li> <li class="query" ...

javascriptjquerycssmeteor

Issue: Debug Failure. Invalid expression: import= for internal module references should have been addressed in a previous transformer

While working on my Nest build script, I encountered the following error message: Error Debug Failure. False expression: import= for internal module references should be handled in an earlier transformer. I am having trouble comprehending what this erro ...

javascripttypescriptnestjs

Combining two input text strings

A React component I'm working on takes the user's first and last name to create unique usernames for them. class App extends Component { render() { return ( <div className="App"> First name:<br/> <input ...

javascriptreactjs

Combining two computed properties to create a new one

Apologies for the novice question, but I'm looking to merge these two computed properties without repeating the code. Thank you in advance! computed: { mergeProperties() { const { end_of_availability } = this.fullData; ...

vue.js

Utilizing JSON Data for Dynamically Displaying Database Objects on a Google Map

After carefully reviewing the information provided in the initial responses and working on implementation, I am updating this question. I am currently utilizing the Google Maps API to incorporate a map into my Ruby on Rails website. Within my markets mode ...

javascriptruby-on-railsajaxjsongoogle-maps