> For the complete documentation index, see [llms.txt](https://jen-hsuan-hsieh.gitbook.io/asp-net/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jen-hsuan-hsieh.gitbook.io/asp-net/chapter1/1.1.the-complete-asp.net-mvc-5-course/110building-a-feature-end-to-end-systematically/1102adding-auto-completion.md).

# 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](https://twitter.github.io/typeahead.js/examples/) 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](https://twitter.github.io/typeahead.js/examples/) of typeahead.js, select [remote](https://twitter.github.io/typeahead.js/examples/#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>
  ```