Want to use two inputs to search on one index

Hi guys,

I am trying to use two searchboxes for one index but cant get it to work. What I want is to search with one searchbox on titles and descriptions and on the other searchbox on locations. This is what my vue template looks like

<template>
<div>
<ais-instant-search :search-client="searchClient" index-name="jobs">
  <div class="search-wrapper">
    <div class="container">
      <div class="row">
        <div class="col-md-5">
          <ais-search-box  placeholder="Beruf, Begriff, Ort"/>
        </div>
      </div>
      <ais-configure :hitsPerPage="5" />
    </div>
  </div>
  <div class="container mt-5">
    <div class="row">
      <h3 class="current-jobs mb-3"> Aktuelle Jobs</h3>
      <ais-hits>
        <template slot="item" slot-scope="{ item }">
          <div class="col-md-12 job-item">
              <h3><a class="title-link" href="#">{{ item.title }}</a></h3>
              <p class="sub-heading">{{ item.location }}</p>
              <p class="job-date">{{ item.created }}</p>
              <p>
                {{ item.description }}
              </p>
              <span>Job merken</span>
          </div>

        </template>
        </ais-hits>
        <ais-pagination />
      </div>
     </div>
    </ais-instant-search>
  </div>
</template>

<script>
  import algoliasearch from 'algoliasearch/lite';
  import { VueAutosuggest } from 'vue-autosuggest';

  export default {
    components: { VueAutosuggest },
    data() {
      return {
        searchClient: algoliasearch(
          'KQVBO2F7VW',
          '5d54e4a85cc99b96893a398889592667'
        ),
        query: '',
      };
    },
    methods: {
      onSelect(selected) {
        if (selected) {
          this.query = selected.item.title;
        }
      },
      indicesToSuggestions(indices) {
        return indices.map(({ hits }) => ({ data: hits }));
      },
    },
  };
</script>

When I use a second searchbox nothing happens with the results.

Maybe someone knows how to get this submit button to work. I want to search on enter or onclick and not on onchange?

Best regards

Hi @NastyPasty,

If you would like to have two searchboxes looking in two different kind of data, we would advise you to separate this data in two different indices, and then create two instances of instantSearch, each one with their own config linking to the correct index.

This will lead you to much better results, as you will be able to configure relevance at the index level in a more refined way proper to each type of data, and then add the widgets relevant to refine the search in the front end for each searchbox as well.

To have more insights about how to choose between one or several indices, you can check this page: https://www.algolia.com/doc/guides/sending-and-managing-data/prepare-your-data/in-depth/choosing-between-one-or-more-indices/.

I hope this makes sense!

1 Like

Thanks for your answer but I dont get it. The location attribute belongs to each job, if I create an index of location how would it then belong to a search of jobs?

Hi @NastyPasty, You can have the same information in each index with different ranking and sorting strategies to make it work better for each type of search.

Your locations could still be tied to your jobs, but searching in each index based on the type of search will make the information provided more relevant. It will also allow you to have two different search instances.

Does that help clarify?

1 Like