Best way to organize search form interface?

I have tab in my application where users can search Accounts. Account table has two different type of accounts, User and Staff type. User type is one that have username, password, etc. Staff only holds position field and status. Both account types share next fields First, Last name, Email and Middle name. Rest of the fields are assigned based on the account type. My search interface is more complex because of that table. When user gets on this tab and try to search for account first they have to choose Account Type, then Account Status then last step is to select desired filter. That can be Username, Email or Name. Both Users and Staff will have Name and Email but only User account type will have username. This is first trick, second is searching account by the name. So far what I researched it would be way easier/more efficient for my SQL query to search by Last and First name then on the Full Name. I debating how to organize my interface to accommodate something like that. Here is example of my current interface:

$('#frmFindaccount_filterby').on('change', changeAccountAttr);

function changeAccountAttr() {
  var elementVal = $(this).val();
  $("#frmFindaccount_search").removeAttr('pattern maxlength title');

  switch (elementVal) {
    case "1":
      $("#frmFindaccount_search").attr({
        "type": "text",
        "placeholder": "Example: jcook56",
        "pattern": "[a-z0-9_-]{0,50}$",
        "title": "User name allows alphanumeric (lowercase only) characters, underscore, dash - no other special characters",
        "maxlength": "50",
        "disabled": false,
        "required": true
      }).val("");
      break;
    case "2":
      $("#frmFindaccount_search").attr({
        "type": "email",
        "placeholder": "example@gmail.com",
        "title": "Enter email address",
        "maxlength": "80",
        "disabled": false,
        "required": true
      }).val("");
      break;
    case "3":
      $("#frmFindaccount_search").attr({
        "type": "search",
        "placeholder": "(Last, First) or (Last+First)",
        "pattern": "[a-zA-Z][A-Za-z' .,-]{0,100}$",
        "title": "A-Z, space, dash, apostrophe, period, comma - no other special characters",
        "maxlength": "100",
        "disabled": false,
        "required": true
      }).val("");
      break;
    default:
      $("#frmFindaccount_search").attr({
        "type": "text",
        "placeholder": "Select Search Criteria",
        "disabled": true,
        "required": false
      }).val("");
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form name="frmFindaccount" id="frmFindaccount" class="frm-findrecords" data-method="findAccount" autocomplete="off">
  <div class="row">
    <div class="form-group col-xs-12 col-sm-12 col-md-3 col-lg-3">
      <select class="form-control find-type" name="frmFindaccount_type" id="frmFindaccount_type" required>
        <option value="">--Account Type--</option>
        <option value="0">All</option>
        <option value="1">User</option>
        <option value="2">Staff</option>
      </select>
    </div>
    <div class="form-group col-xs-12 col-sm-12 col-md-3 col-lg-3">
      <select class="form-control" name="frmFindaccount_status" id="frmFindaccount_status" required>
        <option value="">--Status--</option>
        <option value="2">All</option>
        <option value="1">Active</option>
        <option value="0">InActive</option>
      </select>
    </div>
    <div class="form-group col-xs-12 col-sm-12 col-md-3 col-lg-3">
      <select class="form-control find-filterby" name="frmFindaccount_filterby" id="frmFindaccount_filterby" required>
        <option value="">--Search By--</option>
        <option value="1">Username</option>
        <option value="2">Email</option>
        <option value="3">Name</option>
      </select>
    </div>
    <div class="form-group col-xs-12 col-sm-12 col-md-3 col-lg-3">
      <div class="input-group">
        <input type="text" class="form-control find-search" name="frmFindaccount_search" id="frmFindaccount_search" placeholder="Select Search Criteria" disabled>
        <div class="input-group-btn">
          <button class="btn btn-primary"><span class="glyphicon glyphicon-search"></span></button>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <div class="alert message-submit"></div>
    </div>
  </div>
</form>

I'm wondering if anyone have suggestion on how this can be accomplished to be user friendly and efficient for search engine? Maybe showing all search filters on the screen? In my opinion that sometimes can confuse, also too many fields and scrolling on the smaller screens.