How to detect wheter search input focused or not in vue-instantsearch?

Question

In my component Search.vue I need to detect whether search input focused or not in order to hide search results if cursor is elsewhere

I used vue-instantsearch

Here is the code of my custome component's template section

<template>
    <ais-index index-name="getstarted_actors" :search-store="searchStore">
        <div class="col-md-10 col-sm-9">
            <ais-search-box :autofocus="true">
                <div class="input-group" ref="searchInputGroup">
                    <ais-input placeholder="Find books..."
                               :class-names="{'ais-input': 'form-control'}" autofocus="true" >
                    </ais-input>
                    <span class="input-group-btn">
                            <ais-clear :class-names="{'ais-clear': 'btn btn-default'}">
                                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                            </ais-clear>
                            <button class="btn btn-default" type="submit">
                                <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                            </button>
                        </span>
                </div>
            </ais-search-box>
            <ais-results v-show="searchStore.query.length > 0">
                <template scope="{ result }">
                    <div v-on:click="searchResultClick(result)" class="found-item">
                        <a> <span>{{ result.name }}</span> <span>{{ result.rating }}</span></a><br/>
                    </div>
                </template>
            </ais-results>
        </div>

    </ais-index>
</template>

duplicate of https://stackoverflow.com/a/41601370/3185307 but with Algolia — Haroen Viaene, Sep 29 '17 at 07:31
I want find solution terms of vue-instantsearch., in order to avoid use custom components — Nodirbek Shamsiev, Sep 29 '17 at 07:50
If you need access to the input, like in the post I linked, you'll have to use `ais-input`. You should be fine with a setup like this — Haroen Viaene, Sep 29 '17 at 13:47

score 1 · Answer 1 · answered Sep 29 '17 at 09:26

1

You can try:

<ais-input placeholder="Find books..."
           :class-names="{'ais-input': 'form-control'}" autofocus="true" 
           @focus="onFocus"
>
</ais-input>

and your methods:

methods: {
  onFocus() { console.log('Focused') }
}

answered Sep 29 '17 at 09:26

Quoc-Anh Nguyen

4,798
1
22
34

How to detect wheter search input focused or not in vue-instantsearch?

1 Answers1