Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

AisSearchBox is not showing when using a :search-function prop on ais-instant-search

See original GitHub issue

Bug 🐞

What is the current behavior?

When adding a searchFunction to ais-instantsearch:

 <ais-instant-search
            :search-client="searchClient"  :index-name="indexUrl"
            :search-function="myFunction"
        >

The searchBox only shows when i call helper.search() So in this case my searchbox won’t show:

This does not work:
  myFunction(helper) {
                if(helper.state.query) {
                    helper.search();
                }
            },

But when i call helper.search() directly the searchbox will show

My layout:

<ais-instant-search
           :search-client="searchClient"  :index-name="indexUrl"
           :search-function="myFunction">
           <ais-search-box :placeholder="searchBalkPlaceHolder"/>
           <ais-configure :restrictSearchableAttributes="searchAttributes" />
           <ais-state-results class="position-absolute white ais-state-results-wrapper" v-if="aboveBreakpoint">
               <search-bar-list slot-scope="{ state: { query }, results: { hits } }" :items="hits" v-show="query"></search-bar-list>
           </ais-state-results>
            <ais-state-results v-else class="col-12 position-fixed white ais-state-results-wrapper">
               <search-bar-list slot-scope="{ state: { query }, results: { hits } }" :items="hits" v-show="query"></search-bar-list>
            </ais-state-results>
       </ais-instant-search>

Im not getting any console ERROR logs in the browser.

What is the expected behavior?

To show the search box but do not a query call on start.

What is the version you are using?

"algoliasearch": "^4.6.0",
"vue-instantsearch": "^3.4.2",
"vue": "^2.6.10",

Always try the latest one before opening an issue.

Issue Analytics

State:
Created 3 years ago
Comments:6 (3 by maintainers)

Top GitHub Comments

1reaction

teundirectleasecommented, Nov 17, 2020

@Haroenv A collega fixed it for me, i had to use an arrow function to parse props but it works now. many thanks 😄

1reaction

Haroenvcommented, Nov 10, 2020

If you do not search with the search function, none of the widgets will render, since they need results to display. What’s the use case you’re using search-function for? It likely can be solved more efficiently with a custom search client like this: https://www.algolia.com/doc/guides/building-search-ui/going-further/conditional-requests/vue/

Top Results From Across the Web

ais-instant-search | Vue InstantSearch

The ais-instant-search widget is a wrapper that allows you to configure your search. ... With the middleware API, you can inject functionality into...

Algolia vue instantsearch dynamically set search query

I use <ais-search-box v-show="false" :value="this.$route.query.q" /> and it works nicely. In terms of performance and best practices, I'm not ...

vue-instantsearch not working in my VueJS 3.0 project #1071

Bug I have a VueJS 3.0 project (Options API) in combination with Firebase and Algolia. Everything works fine.

Integrate Algolia InstantSearch into a Vue Project

This TechBlog is based on Vue.js & Nuxt.js, using nuxt/content as ... Please read ais-instant-search prop search-function API documentation.

Resetting Algolia's vue-instantsearch when clicking a result

Fiddling with Algolia's vue-instantsearch component to reset the search ... available when the component does not expose the props I needed.