Bootstrap autocomplete combobox

Good Evening :D

I'm struggling in implementing a Bootstrap autocomplete combo box. I want users to be able to type in the combobox and it'll start to display the options that match, when the user selects one it will populate the page with data.

Expansion Class:

using System;
using System.Collections.Generic;

namespace WebApplication1.Models
{
    public partial class Expansion
    {
        public Expansion()
        {
            CardDetail = new HashSet<CardDetail>();
        }

        public short ExpansionId { get; set; }
        public string ExpansionName { get; set; }
        public string ExpansionCode { get; set; }
        public byte? ExpansionTypeId { get; set; }
        public byte? BlockId { get; set; }
        public short? BoosterConfigId { get; set; }
        public bool IsActive { get; set; }
        public DateTime InsertedDate { get; set; }

        public Block Block { get; set; }
        public BoosterConfig BoosterConfig { get; set; }
        public ExpansionType ExpansionType { get; set; }
        public ICollection<CardDetail> CardDetail { get; set; }
    }
}

Expansion IRepository:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace WebApplication1.Models.Repository
{
    public interface IExpansionRepository
    {
        IEnumerable<Expansion> Expansions { get; }

        Expansion GetExpansionByID(int ExpansionId);
    }
}

Expansion Repository:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace WebApplication1.Models.Repository
{
    public class ExpansionRepository : IExpansionRepository
    {

        private readonly BlackLotusContext _blackLotusContext;

        public ExpansionRepository(BlackLotusContext blackLotusContext)
        {
            _blackLotusContext = blackLotusContext;
        }


        public IEnumerable<Expansion> Expansions
        {
            get
            {
                return _blackLotusContext.Expansion;
            }
        }

        public Expansion GetExpansionByID(int expansionID)
        {
            return _blackLotusContext.Expansion.FirstOrDefault(e => e.ExpansionId == expansionID);

        }
    }
}

Expansion View Model:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace WebApplication1.Models.ViewModels
{
    public class ExpansionViewModel
    {
        public string ExpansionName { get; set; }
        public string ExpansionCode { get; set; }
        public string BlockName { get; set; }

        public IEnumerable<Expansion> Expansions { get; set; }
    }
}

Controller:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.Rendering;
using Microsoft.EntityFrameworkCore;
using WebApplication1.Models;
using WebApplication1.Models.ViewModels;
using WebApplication1.Models.Repository;

namespace WebApplication1.Controllers
{
    public class CardDatabaseController : Controller
    {
        private readonly BlackLotusContext _context;
        public IExpansionRepository _expansionRepository;

        public CardDatabaseController(BlackLotusContext context, IExpansionRepository expansionRepository)
        {
            _context = context;
            _expansionRepository = expansionRepository;
        }

        // GET: CardDatabase

        public ViewResult Index()
        {
            ExpansionViewModel expansionViewModel = new ExpansionViewModel();

            expansionViewModel.Expansions = _expansionRepository.Expansions;

            return View(expansionViewModel);
        }

    }
}

View:

@model WebApplication1.Models.ViewModels.ExpansionViewModel<div class="row"><div class="col-md-8"><ul class="nav nav-tabs"><li class="active"><a href="#basicsearch" data-toggle="tab">Basic Search</a></li><li><a href="#advancedsearch" data-toggle="tab">Advanced Search</a></li></ul><div id="myTabContent" class="tab-content"><div class="tab-pane fade active in" id="basicsearch"><h2>Basic Search</h2><form asp-controller="CardDatabase" asp-action="Index" method="post"><div class="form-group"><select asp-for="ExpansionName" asp-items="Model.Expansions"></select></div></form></div><div class="tab-pane fade" id="advancedsearch"></div><</div></div>

Any help would be appreciated.

Regards,

D