Building the form

Start off by creating the HTML in your view. Create a <select> box with an <option> for each field you want to filter, an <input> for the query, and a pair of radio buttons – we'll use these to filter active and non-active users. Make sure the value attribute of each <option> reflects the key in the user data – this will save on code required and will make the purpose of the select box more obvious.

The data you are filtering by does not need to be displayed for our filtering to work, although a user experience consideration needs to come into play here. Would it make sense if a table row was being displayed without the data you're filtering it on?

Create the form that will be used for filtering:

      <form>
        <label for="fiterField">
          Field:
          <select id="filterField">
            <option value="">Disable filters</option>
            <option value="isActive">Active user</option>
            <option value="name">Name</option>
            <option value="email">Email</option>
            <option value="balance">Balance</option>
            <option value="registered">Date registered</option>
          </select>
        </label>

        <label for="filterQuery">
          Query:
          <input type="text" id="filterQuery">
        </label>

        <span>
          Active:
          <label for="userStateActive">
            Yes:
            <input type="radio" value="true" id="userStateActive"                   
          selected>
          </label>
          <label for="userStateInactive">
            No:
            <input type="radio" value="false" id="userStateInactive">
          </label>
        </span>
      </form>

This form includes a select box for selecting a field a filter by, an input box that would allow the user to enter a query to filter on, and a pair of radio buttons for when we wish to filter by active and non-active users. The imagined user flow is this: the user would select the field they wish to filter the data by and either enter their query or select the radio buttons. When the isActive (Active user) option is selected in the select box, the radio buttons will be displayed and the input box will be hidden. We have ensured the first radio button is selected by default to help. 

The filtering inputs do not need to be included in a form to work; however, it is good practice to retain semantic HTML, even in a JavaScript application.