Search with multiple parameters not refining

instantsearch
#1

I have recently starting working for a new employer and one of my first projects is one that I have inherited from a contractor who left the day after I started. It is built using Laravel/Vue/Algolia. I have used Laravel before… The handover was very brief and consequently I didn’t have the opportunity to benefit from the experience he had gained whilst working on the project.

The project is for a recruitment agency and my predecessor has done an excellent job of putting the site together so far. The search form initially has just three inputs - a free text Keyword field into which the client enters the their specialst job skills, a Location field which suggests locations as the client types, and a Salary dropdown select. All works fine if just the Keyword and Location are entered and the client can easily refine the list of jobs returned on the results page by changing the Keyword, Location, Distance (from initial location), Salary, Contract Type and Expertise area.

‘completed = 0’ ensures that only unfilled job vacancies are returned.

 <ais-configure
    :query="keyword"
    :numericFilters="'completed = 0'"
    :around-lat-lng.camel="latitudeAndLongitude"
    :around-radius.camel="searchRadiusInMetres"
  />

Unfortunately the Salary filter wasn’t having any bearing on the results rendered on the search results page. My issue is that when I add the Salary to the numericFilters, thus;

computed: {
   sal() {
      return "salary_from >= "+ this.salary;
    },
}
 <ais-configure
    :query="keyword"
    :numericFilters="[sal,'completed = 0']"
    :around-lat-lng.camel="latitudeAndLongitude"
    :around-radius.camel="searchRadiusInMetres"
  />

…the correct result set is returned but the client can no longer refine the salary, and the following error message appears in the console.

[Vue warn]: Error in v-on handler: "Error: [Numeric filters] Can't switch from the advanced to the managed API. It is probably an error, if this is really what you want, you have to first clear the numeric filters."

Am I taking the completely wrong approach in simply adding the salary to the numericFilters?

I really need to grasp this quickly as my next task is to factor in the Expertise area.

Many thanks in advance

#2

Hello David,

Thanks for the question.
Could you provide us a link where we can see what happen? A sandbox like https://codesandbox.io/s/github/algolia/create-instantsearch-app/tree/templates/vue-instantsearch would be perfect to be able to reproduce your problem.

Thanks!

Cheers.

#3

Hi Jose-Paul

I did some further digging (I didn’t realise you had replied so soon) and found this https://github.com/algolia/vue-instantsearch/issues/599 the point raised is similar to the issue I am explaining.

The conributor answered to the question by suggesting using filters instead of numericFilters

All sounds good to me, but my problem is that when I changed the line;

:numericFilters="['completed = 0','salary_from >= 30000']"

which worked but wasn’t refinable to;

:filters="['completed = 0','salary_from >= 30000']"

it just crashes, returning no results whatsoever, giving the following error

Failed to load resource: the server responded with a status of 400 (Bad Request)

So, before I try and replicate my issue using your sandbox, if you could tell me what syntax I need to use with filters, I will be on my way, and I will trouble you no more… in. this intance at least…