Search button within search bar (Vue)

Questions
1

I’ve been using a reactive searchbar that searches on input of characters rather than on submit/pressing a button. Since my backend is too slow to keep up, I want to add a search button inside of the f7 searchbar, preferably where the clear button normally goes. I tried the following, but it looks crappy. I want it to match the style of the searchbar:

                    <f7-searchbar
                        placeholder="DOKUMENTATION SUCHEN"

                        @focus="showFilters=true"
                        @blur="showFilters=false"
                        v-model="searchText"

                        v-on:submit.prevent
                        style=" border-width: 0px; padding: 30px; padding-right: 0px; padding-left: 0px; margin-left: 0px; margin-right: 0px; background: rgb(57, 70, 76); color: black; width: 100%"

                    >
                                                        <button style="padding:0px; margin: 0px"><icon name="search"></icon></button>
                    </f7-searchbar>

This is how it looks:

searchbar
searchbar.png1559×38 2.25 KB

Also, since I’m using a search icon to handle a search, is there a way to get rid of the small icon on the left?

2

Only with CSS:

.searchbar .searchbar-icon {
  display: none !important;
}

Then you need to tweak its styles to match your needs :slight_smile: