Narrow search by specific attributes

[joshpalmeroc]

I am using the React instant search library.

I have a form that has two text search inputs (JobPostingTitle, Location).

I want it so that the first field only effects searches by JobPostingTitle and the second field only effects searches by Location.

I tried using the useConfigure hook to setup a filter for facet filtering. My problem is that it only works if its an exact match to the facet value. It would be ideal if there was some way i could use the "useSearcbox" hook but refine it more so its only searching what i need it to search.

Scenarios:

1. User fills in only "JobPostingTitle" = Searches are returned based on the JobPostingTitle
2. User fills in only "Location" = Searches are returned based on the "Location"
3. User fills in both "JobPostingTitle" and "Location" = Searched are returned based on both the "JobPostingTitle" and "Location"

import {
    useConfigure
} from 'react-instantsearch';
import { useJobSearchContext } from '../context/JobSearchContext';
import Form from 'blocks/Form/elements/Form';

const SearchForm = () => {
    const { search_form } = useJobSearchContext();
    const { refine } = useConfigure({});

    function handleSearch(data) {
        refine({
            filters: `JobPostingTitle:"${data.JobPostingTitle}"`,
        });
    }
    return (
        <div className="jobsearch__search-form">
            <Form submit={(_, data) => handleSearch(data)} form={search_form} />
        </div>
    );
};
export default SearchForm;

[joshpalmeroc]

 const { refine } = useSearchBox();
    const { refine: configure } = useConfigure({});

    function handleSearch(data) {
        const { JobPostingTitle, Location } = data;

        if (!JobPostingTitle && !Location) return;

        const restrictions = [];
        let query = '';

        if (JobPostingTitle) {
            restrictions.push('JobPostingTitle');
            query += JobPostingTitle;
        }
        if (Location) {
            restrictions.push('Location');
            query += ` ${Location}`;
        }

        configure({ restrictSearchableAttributes: restrictions });
        refine(query.trim());
    }

I was actually able to solve my problem by using "restrictSearchableAttributes"

[joshpalmeroc]

After working with my project a little more i'm facing some issues when it comes to clearing those inputs. Lets say someone fills in JobPostingField and an x icon appears in the input

i cannot clear that specific input from search because the url for my query only contains "query=Tech%20London" for example. At the moment all i am able to do is run "clear" on useSearchbox but that empties out both of my fields rather then just the single one i want to target.

[joshpalmeroc]

I figured out my problem again.

useSearchbox returns the existing query
My form field has the value in state for that field

        const value = data[name]; // the form input value ("tech")
        let newQuery = query.replace(value, '').trim(); // replacing the existing queries text with nothing
        refine(newQuery); // refine again with useSearchbox