Customize Simple search for dropdown select box

1

hello guys, i’m using simple search plugin.
My search box include 2 part:
part 1: the search input box, user type here and press search button for searching
part 2: the search dropdown box, user will select options in here and select what they want and press search button
Problem is i dont know how to use simple search plugin to create dropdown box like image. And how to get data i want and show it in dropdown box from md file to this

image
image1000×142 3.62 KB

2

my code

<div class="search-wrapper">
  <div class="container">
    <div class="form-row">
      <form name="search" data-simplesearch-form autocomplete="on" class="form-search-jobs">
        <div class=" form group col-sm-12">
          <div class="  form-inline">
            <i class="fa fa-search"></i>
            <div class="form-group">
            <input 
            placeholder="Search jobs..." 
            name="searchfield" class="search-input" 
            type="text" {% if min_chars > 0 %}
             min="{{- min_chars -}}" {% endif %} 
             required value="{{ query|e }}" data-search-invalid="{{ "PLUGIN_SIMPLESEARCH.SEARCH_FIELD_MINIMUM_CHARACTERS"|t(min_chars)|raw }}"
              data-search-separator="{{ config.system.param_sep }}"
               data-search-input="{{ base_url }}{{ config.plugins.simplesearch.route == '@self' ? '' : (config.plugins.simplesearch.route == '/' ? '' : config.plugins.simplesearch.route) }}/query"/>
            </div>
          </div>
        </div>
         <div class="form group col-sm-12">

          <select class="form-control location-dropdown" id="collection"  type="text">
            <options>1</options>
          </select>
          =
        </div> 
        <div class="form group   col-sm-12">
          {% if config.plugins.simplesearch.display_button %}
            <button class="search-button" type="submit">FIND JOB</button>
          {% endif %}
        </div>
      </form>
    </div>
  </div>
</div>