Vue 3 select component with first character filtering functionality

Is there a way to filter options based on user input in Select2, especially when I need to get the first symbols entered by the user? I have tried using the @select event but it doesn't seem suitable for this task. How can I achieve this?

<Select2
  value="modelValue"
  @input="(e) => modelValue = e.target.value"
  :settings="select2Settings"
/>
select2Settings: {
  sorter: function (results) {
    return results.filter((item) => item.text.startsWith(modelValue))
  }
}

I also attempted to use the @change event but it was unsuccessful. You can see an example of this issue in this demo.

javascriptvue.js

Answer №1

Everything is functioning perfectly!

customSelectSettings: {
    filter: function (input, item) {
      if (!input)
        return item;
      if (item.name.toLowerCase().startsWith(input.toLowerCase()))
        return item;
      else
        return null;
    },
}

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

Why am I unable to access the array once the loop has finished?

While utilizing the Google Maps API and AngularJS (1.5.8), I encountered an issue where I couldn't access markers that were created in a loop. The code snippet below is located inside the initMap function: var markers = []; for(var i=0; i<10; i++ ...

javascriptgoogle-maps

How can I retrieve both the keys and values of $scope in AngularJS?

Here is the code I have written to retrieve all key values using $scope. $scope.Signup={}; $scope.Message=''; $scope.SubmitPhysicianSignup = function() { var url = site_url + 'webservices/physician_signup'; //console.lo ...

javascriptangularjs

Three fixed position divs arranged horizontally side by side

I am attempting to organize 3 divs in a row using Flex. ISSUE 1: The div that is centered is set with position: fixed. However, the two other divs on each side do not stay aligned with the centered fixed div when scrolling. If I change the centered div to ...

javascripthtmlcss

Finding the index of a class using jQuery is posing some difficulties

I am facing a challenge with controlling multiple hidden modals on a webpage using a single block of JavaScript code. In my attempt to test whether I can access the correct close button with the class close, I am encountering an issue where my console.log ...

javascriptjquery

Controlling Formatting in ASP.NET

Feeling puzzled by a seemingly simple question with no clear solution in sight. We're attempting to transition an interface to an ASP.NET control that currently appears like this: <link rel=""stylesheet"" type=""text/css"" href=""/Layout/CaptchaLa ...

asp.netjavascriptcsscontrolsformatting

Is there a way to incorporate the 'window' into middleware when using Express?

I am using middleware to retrieve data from a cookie with the help of vue-cookies. try { if (window.$cookies.get('region')) { res.setHeader('Set-Cookie', [ `region=${window.$cookies.get('region')};pat ...

javascriptvue.jsexpresscookiesvue-cookies

What is the best way to utilize {...this.props} within a functional component?

I recently purchased a React-Native course on Udemy where the instructor used {...this.props} but unfortunately, it caused an error for me. The error message I received was: TypeError: undefined is not an object(evaluating '_this.props') Any ...

javascriptreactjsreact-native

Three.js - creating transparent materials that only display the background, not the inner sides of objects

I am interested in applying a transparent material to the front-side faces of a geometry. It's a fairly simple process: var normal = new THREE.MeshNormalMaterial(); normal.side = THREE.BackSide; var materials = [ norma ...

javascriptthree.js

What is the process for eliminating bower from the current project and implementing requirejs using yarn (newbie perspective)?

Is there a way to switch from using bower in my workflow? After installing yeoman and the knockoutjs generator, I discovered that bower support is limited and bootstrap now uses popper.js, which will no longer support bower in v2. I want to avoid any issu ...

javascriptnode.jsrequirejsboweryarnpkg

Can you explain the concept of the "Regular Expression Denial of Service vulnerability"?

After recently setting up nodejs on a server, I ran a basic npm install command and received multiple messages like the following: $ npm install npm WARN deprecated <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="55383c3b3c3834 ...

javascriptnode.jsnpmminimatch

The Node.js application is up and running on the Node server, but unfortunately, no output is

Greetings, I am a beginner in nodejs. var io = require('socket.io').listen(server); users = []; connections = []; server.listen(process.env.PORT || 3000); console.log('server running....on Pro'); app.get ('/', function(re ...

javascriptnode.jsexpresssocket.io

Not every time you call the AngularJS run method does it actually execute

Working on a simple Angular app, I wanted to implement a user login check and redirection. However, I encountered an issue where accessing the home page from the form site resulted in inconsistent behavior - sometimes redirecting and other times showing ...

javascriptangularjs

pausing a timer using JavaScript or jQuery

My goal is to make my clock stop at zero and then display the results page. Unfortunately, I am currently facing difficulties in achieving this. var clock = { time: 2, timeleft: 0, bigben: null, countDown: function() { clock.time--; $("#timer") ...

javascriptjquerytimecountdowncountdowntimer

Employ useEffect with numerous dependencies

I am currently working on fetching employee data using the useEffect hook. function AdminEmployees() { const navigate = useNavigate(); const dispatch = useDispatch(); // Fetching employee data const { adminEmployees, loading } = useSelector( ( ...

javascriptreactjsuse-effect

When trying to convert a function component to a class component, using `npm init react-app` may result in the error `ReferenceError: React is not defined no-undef`

After running npm init react-app appname, I noticed that the file App.js was created, containing a function component: function App() { return ( <SomeJSX /> ); } I decided to change this function component into a class component like this: c ...

javascriptnode.jsreactjsnpmwebpack

Attempting to authenticate a token within a Node.js environment

Once a user completes the sign-up process, I send them an email containing a unique token and their email address. When they click on the link provided in the email to verify their account, I attempt to authenticate the token by extracting the token object ...

javascriptnode.jsexpressmongoose

Incorporating Distinct Items into an Array with JavaScript

There is a Filter object that stores information about different Car Types. The data is fetched via AJAX calls - on the first call, objects 0-10 are created and added to an array. Subsequent calls bring more car types which are also appended to the array. ...

javascriptjqueryarraysajaxobject

What is the best way to capture the result of an arrow function within an object in JavaScript and store it in a variable?

I am currently implementing a piece of JavaScript code taken from a publicly available repository located at: https://github.com/base62/base62.js My goal is to capture the output for further manipulation, specifically for a date conversion process. Howev ...

javascript

Is it possible to associate non-HTML elements such as v-btn with Nuxt's tag prop?

Here is the code I have been working on in my editor: <nuxt-link :to="www.test.com" tag="v-btn" /> Link Button </nuxt-link> I realized that v-btn is not a standard HTML tag, but rather a specific one for Vuetify. When I write the code this wa ...

vue.jstagsvuetify.jsnuxt.js

Is p-queue designed to utilize multiple threads?

Have you heard of a nodejs module that allows you to limit the number of concurrent promises? Check out this link I'm curious, does this module utilize multiple threads? Here's an example taken from the official page: const {default: PQueue} ...

javascriptnode.jsmultithreadingpromise