Create Form that searches/filters a data list

Question

In SharePoint I created a data list that contains a list of teachers with some other information about the teacher. I realize this list isn't the most practical, but it was imported from a excel sheet. So to keep the code short, I'm only showing 2 teachers and limited columns in this example. So if the teacher works at the location or that grade level the data list will show the grade or location or show a 0 if the teacher does not work at that location or grade level.

So below is the data list on SharePoint. As you can see Jimmy Johnson works in Brooklyn and Manhattan, teaches 2nd and 3rd grade, and is tenure. While Will Smith teaches in Manhattan and Queens, teaches 1st, 3rd, 4th, and is not tenure.

 <table>
    <tr>
        <th>Name</th>
        <th>Location1</th>
        <th>Location1</th>
        <th>Location1</th>
        <th>Grade1</th>
        <th>Grade1</th>
        <th>Grade1</th>
        <th>Grade1</th>
        <th>Tenure</th>
    </tr>
    <tr>
        <td>Jimmy Johnson</td>
        <td>Brooklyn</td>
        <td>Manhattan</td>
        <td>0</td>
        <td>0</td>
        <td>2nd</td>
        <td>3rd</td>
        <td>0</td>
        <td>Yes</td>
    </tr>
    <tr>
        <td>Will Smith</td>
        <td>0</td>
        <td>Manhattan</td>
        <td>Queens</td>
        <td>1st</td>
        <td>0</td>
        <td>3rd</td>
        <td>4th</td>
        <td>No</td>
    </tr>   
</table>

I created a Web Page Part and I have a form which the user can fill out. The form contains 3 select boxes: location, grade, and tenure. What I'm trying to accomplish is when the user submits this form. It will then list all teachers that meet those criteria.

Form Here:

<form action="">

    <label for="location">Location:</label>
    <select id="location" name="location">
        <option value="brooklyn">Brooklyn</option>
        <option value="manhattan">Manhattan</option>
        <option value="queens">Queens</option>
        <option value="new-york">New York</option>
        <option value="staten-island">Staten Island</option>
    </select>

    <label for="grades">Grade Level:</label>
    <select id="grades" name="grades">
        <option value="1">1st</option>
        <option value="2">2nd</option>
        <option value="3">3rd</option>
        <option value="4">4th</option>
        <option value="5">5th</option>
        <option value="6">6th</option>
        <option value="7">7th</option>
        <option value="8">8th</option>
        <option value="9">9th</option>
        <option value="10">10th</option>
    </select>

    <label for="tenure">Tenure?</label>
    <select id="tenure" name="tenure">
        <option value="volvo">Yes</option>
        <option value="saab">No</option>
    </select>

    <input type="submit">

</form> 

So if the user selects Location: Manhattan, Grade: 3rd, and Tenure: Yes. The page will then display all teachers who meet that criteria. Any idea on how to accomplish this?

Answer 1

We already have the selected values from the labels. You need to use jquery ajax REST call to query the list and display the results in html. Below sample Sharepoint Hosted add in form that I have created.
Refer to this article. The images are broken, however you can download them and open.
There are 3 ways:
1. Sharepoint hosted add in- add the form, in app.js add the js to handle the rest call to get list items by filtering./_api/web/lists/getbytitle('list')/items?$filter=Location eq ‘Manhattan' &&...(more filters)

2. Javascript reference: form in sharepoint designer, reference jquery. Call Sharepoint list based on jquery on click events.

3. Easier if you learn it: SPFX React webpart- best way on modern pages. We have pnpjs which handles everything behind the scenes on calling the list and render which renders all the list items. Also components can be divided in react which is very robust.
Let me know if you need more help.