How to toggle a search box in Service Portal Widget between text and reference

[Yi Ming Song]

I read about sn-record-picker, but something feels off.  What do I need to add for the picker to start reading records from the backend?

HTML

<div class="search-box">
  <!-- Radio buttons -->
  <div class="search-options">
    <label>
      <input type="radio" ng-model="c.searchType" value="attachment_name">
      Attachment Name
    </label>
    <label>
      <input type="radio" ng-model="c.searchType" value="keywords">
      Keywords
    </label>
    <label>
      <input type="radio" ng-model="c.searchType" value="requestor">
      Requestor Name
    </label>
  </div>

  <!-- Search input -->
  <div class="search-input-container">
    <input ng-if="c.searchType !== 'requestor'"
           type="text"
           ng-model="c.searchTerm"
           placeholder="Search..."
           class="form-control search-input">

    <sn-record-picker ng-if="c.searchType === 'requestor'"
                      field="c.requestorField"
                      table="sys_user"
                      display-field="name"
                      value-field="sys_id"
                      multiple="false"
                      placeholder="Search Requestor...">
    </sn-record-picker>
  </div>

  <button class="btn btn-primary" ng-click="c.doSearch()">Search</button>
</div>

CSS

.search-box {
  background-color: #e6f2ff; /* light blue */
  padding: 15px;
  border-radius: 6px;
  margin-bottom: 15px;
}

.search-input-container {
  margin-bottom: 10px;
}

.search-input,
sn-record-picker {
  width: 100%;
  max-width: 400px;
  display: inline-block;
}

.search-options {
  margin-bottom: 10px;
}


sn-record-picker {
  width: 400px;
  display: inline-block;
}

/* Limit requestor record picker width */
.search-input-container sn-record-picker,
.search-input-container .select2-container {
  max-width: 400px;
  width: 100%;
  display: inline-block;
}

[RaghavSh]

@Yi Ming Song Your code seems correct, seems you have defined the field in "c.requestorField" in client script.

Can you try c.requestorField without ""  or hardcode field as 'name' or 'email' for testing

[RaghavSh]

@Yi Ming Song Were you able to get this fixed

[Ankur Bawiskar]

@Yi Ming Song 

what's your business requirement?