Show X(close) icon on search input vue

You can add a type="search" to your form input.

You can see which browsers this is compatible with from

https://caniuse.com/#feat=input-search

LOL What are you talking man! I need to add close(X) to an input search type. Im not taking about input types. :D

@petritr - Did you actually try my suggestion? If not I would suggest you do because when you define the input type as search and type in the field it adds a cross on the right.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search

@D9705996 you are talking for input types html, my question is how to add an close(X) action with vue.js. My question is about Vue.js not about input types HTML.

@D9705996 Nice! I didn't know about this. And this is also great for accessibility.

@petritr - I have provided how to add clear icon to a search input which I assumed was what you required. This will work in your VueJS template as well as in vanilla HTML/Blade.

If you need a different behaviour can you please provide more information about exactly what you need and provide your existing code so I can help

@D9705996 Okay one more time, i need close action (X), escape(key) action close, and click anywhere outside the search, and the search drop down result close action.

I need close action that will give the possibility to close the result from the the search input and the search result drop down in Vue.js

I don't need HTML or CSS solution focused on input and icon or something, i need an Vue.js close action example.

@petritr - you never mentioned this was a drop down. That does change things a bit. Can you please share your code to allow me to see what you are currently doing so I can help

@D9705996 you can imagine i search for result and somehow they are display somewhere.

By the code you will be even more confused. Thanks for trying to help.

@petritr - there are hundreds, if not thousands of way to achieve what you want but without knowing what you setup already it is impossible to know if they will work for you.

I have previously used Select2 for drop downs that has a lot of flexibility and worked for me. It has all the features you ask for and there is a vue specific plugin

https://sagalbot.github.io/vue-select/

Let me know if this looks like what you are looking for.

@D9705996 well i don't use an package i have done it alone:

The input:

<input class="form-control" type="search" name="search" v-model="search" placeholder="Search">

The computed property:

computed: {
            filteredLog() {
                return this.logs.filter((log) => {
                    //return customer.name.match(this.search);
                    return `${log.id} ${log.name}`.toLowerCase().includes(this.search.toLowerCase());
                });
            }
        },

here i need to add close action as e mentioned before.

You can bind to the keydown and blur events in your input

<input 
  class="form-control" 
  type="search" 
  name="search" 
  v-model="search" 
  placeholder="Search"
  @keydown.esc="close_search" 
  @blur="close_search" 
>

Then in your vue code.

methods: {
    close_search() {
        // put your close logic here
    }
}

Does this help?