Javascript 使用Typeahead.js替换MVC下拉列表

我目前使用MVC下拉列表来显示我的下拉列表。我希望将我的整个页面移动到JS和web api。当前代码运行正常，可与我的控制器配合使用。我有一些适用于这个API上主表的示例代码，但我想看看是否可以让它以与使用MVC下拉插件相同的方式工作，但使用TypeAhead.js

StanceType DropDownList的当前代码：

<div class="row">
    <div class="col-sm-4 form-group">
        @Html.LabelFor(m => m.Stances.Name) @Html.TextBoxFor(m => m.Stances.Name, new { @class = "form-control col-lg" })
    </div>
    <div class="col-sm-4 form-group">
        @Html.LabelFor(m => m.Stances.StancesTypesId) @Html.DropDownListFor(m => m.Stances.StancesTypesId, new SelectList(Model.StancesTypes, "Id", "Name"), "Select Stance Type", new { @class = "form-control col-lg" })
    </div>
    <div class="col-sm-4 form-group">
        @Html.LabelFor(m => m.Stances.BrandsId) @Html.DropDownListFor(m => m.Stances.BrandsId, new SelectList(Model.Brands, "Id", "Name"), "Select Brand", new { @class = "form-control col-lg" })
    </div>
</div>

这是我正在尝试的新的typeAhead.js和API控制器，但它只显示来自Stances数据库的名称数据，而不是StanceTypes字段的名称字段

var stances = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('StancesTypesId'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  remote: {
    url: '/api/stances?query=%QUERY',
    wildcard: '%QUERY'
  }
});

$('#stancetype').typeahead({
  minLength: 0,
  hightlight: true
}, {
  name: 'StancesTypesId',
  display: 'name',
  source: stances
});


// GET /api/Stances
public IEnumerable <StancesDto> GetStances() {

  //get accountid from user
  string userId = User.Identity.GetUserId();
  var userAccountID = _context.AccountProfile.Single(c => c.UserId == userId);

  var stancesTypes = _context.StancesTypes.ToList();
  var priority = _context.Priority.ToList();
  var brands = _context.Brands.ToList();

  var viewModel = new StancesViewModel {
    StancesTypes = stancesTypes,
      Priority = priority,
      Brands = brands
  };

  return _context.Stances.ToList().Select(Mapper.Map <Stances, StancesDto> ).Where(c => c.AccountGUID == userAccountID.AccountGUID);
}

var stances = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('StancesTypesId'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  remote: {
    url: '/api/stances?query=%QUERY',
    wildcard: '%QUERY'
  }
});

$('#stancetype').typeahead({
  minLength: 0,
  hightlight: true
}, {
  name: 'StancesTypesId',
  display: 'name',
  source: stances
});


// GET /api/Stances
public IEnumerable <StancesDto> GetStances() {

  //get accountid from user
  string userId = User.Identity.GetUserId();
  var userAccountID = _context.AccountProfile.Single(c => c.UserId == userId);

  var stancesTypes = _context.StancesTypes.ToList();
  var priority = _context.Priority.ToList();
  var brands = _context.Brands.ToList();

  var viewModel = new StancesViewModel {
    StancesTypes = stancesTypes,
      Priority = priority,
      Brands = brands
  };

  return _context.Stances.ToList().Select(Mapper.Map <Stances, StancesDto> ).Where(c => c.AccountGUID == userAccountID.AccountGUID);
}