1.10.2.Adding Auto-completion

• 1.Install package install-package Twitter.Typeahead

• 2.Modify bundleConfig.cs

        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/lib").Include(
                        "~/Scripts/jquery-{version}.js",
                        "~/Scripts/bootstrap.js",
                        "~/Scripts/bootbox.js",
                        "~/Scripts/respond.js",
                        "~/Scripts/DataTables/jquery.datatables.js",
                        "~/Scripts/DataTables/datatables.bootstrap.js",
                        "~/Scripts/typeahead.bundle.js"
                       ));

• 3.Search the example of typeahead.js and copy it's css style (start from .typeahead)

• 4.Create a new css file in Content and paste it

• 5.Back to the example of typeahead.js, select remote, copy the code

• 6.Paste the code to New.cshtml, use @section scripts

  @section Scripts
  {
  <script>
  $(document).ready(function () {
   var customers = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
     url: '/api/customers?query=%QUERY',
     wildcard: '%QUERY'
    }
   });
  
   $('#customer').typeahead({
    minLength: 3,
    highlight: true
   }, {
     name: 'customers',
    display: 'name',
    source: customers
   });
  });
  </script>
  }

• 7.Modify the input in the form which you want to apply auto complete

  <form>
    <div class = "form-group">
      <label>Customer</label>
    <input id ="customer" type = "text" value="" class="form-control">
  </div>