Skip to main content

Search Filters

Search for jobs via keyword.

data-sf="keywords-search"

data-sf="keywords-search" need to be in a <input> tag with type="text".

Example!
<input
    type="text"
    placeholder="Enter keyword..."
    class="form-control"
    data-sf="keywords-search"
/>
http://localhost:3000

Search for jobs via location using our in-house GEO location search API.

We provide one SmartFeed element data-sf="location-result-text" which returns the location match from the input field from data-sf="location-search-input"

Due to the complexity of location search, SmartFeed needs to know what HTML wrapper element to use to append all available location results; this is achieved with the data-sf="location-result" data attribute.

caution

From prevent elements from leaking into other parts of your website, all location data attribute must be inside another data attribute called data-sf="location-search"

data-sf="location-search" // Parent
    data-sf="location-search-input" // Child
    data-sf="location-result" // Child & Parent
        data-sf="location-result-text" // Smartfeed Element
Example!
<div data-sf="location-search">
    <div class="input-group">
        <input
            type="search"
            class="form-control"
            placeholder="Search location..."
            data-sf="location-search-input"
        />
        <a data-sf="location-result">
            <div class="form-control">
                <label data-sf="location-result-text"></label>
            </div>
        </a>
    </div>
</div>
http://localhost:3000

By default, the location search is set to 15 miles, but you can change this with the SmartFeed Distance Search.

data-sf="distance-filter"

data-sf="distance-filter" need to be in a <select> tag with one <option> tags for reference for all the available options.

Example!
<select 
    class="form-control" 
    data-sf="distance-filter"
>
    <option class="option">Select Distance</option>
</select>
http://localhost:3000
caution

data-sf="distance-filter" must be child to data-sf="location-search"

Example!
<div data-sf="location-search">
  <label class="form-label" for="location-search">Location Search</label>
  <div class="input-group">
    <input
      id="location-search"
      type="search"
      class="form-control"
      placeholder="Search location..."
      data-sf="location-search-input"
    />
    <a data-sf="location-result">
      <div class="form-control">
        <label data-sf="location-result-text"></label>
      </div>
    </a>
    <div class="input-group-append">
      <select
        id="distance"
        class="form-control"
        placeholder="Distance"
        data-sf="distance-filter"
      >
        <option class="option">Select Distance</option>
      </select>
    </div>
  </div>
</div>
http://localhost:3000