title: How do I correctly use typeahead.js to autocomplete and retrieve data?
body: <p>I have an old autocomplete.js code and with modification I tried to migrate it to typehead.js. The problem is I quite didn't find any results similar to angular and ajax.</p>
  
  <p>Here's my script.</p>
  
  <pre><code>$('#empid').typeahead({
  
          minLength: 1,
          source: function (request, response) {
              $.ajax({
  
                  url: "http://localhost:2222/api/search/PostSearch",
                  type: "POST",
                  data: "{'eid':'" + document.getElementById('empid').value + "'}",
                  dataType: 'json',
                  success: function (data) {
                      response(jQuery.parseJSON(data));
                  }
              });
          }
      });
  </code></pre>
  
  <p>So How do I correctly do this. Help would be much appreciated.</p>
  
  <p>Hi added the html script. Still couldn't let it to work. Can you help?</p>
  
  <pre><code>&lt;script src="../../js/form-search.js"&gt;&lt;/script&gt;
  &lt;!-- .page-content --&gt;
  &lt;div ng-controller="SearchController" class="page-content clearfix"&gt;
      &lt;!-- .page-content-wrapper --&gt;
      &lt;div class="page-content-wrapper"&gt;
          &lt;div class="page-content-inner"&gt;
              &lt;!-- Start .page-content-inner --&gt;
              &lt;div id="page-header" class="clearfix"&gt;
                  &lt;div class="page-header"&gt;
                      &lt;h2&gt;Search Employee&lt;/h2&gt;
                      &lt;span class="txt"&gt;Search and manage employees&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div class="header-stats"&gt;
                      &lt;div class="spark clearfix"&gt;
                          &lt;div class="spark-info"&gt;&lt;span class="number"&gt;2345&lt;/span&gt;Visitors&lt;/div&gt;
                          &lt;div id="spark-visitors" class="sparkline"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="spark clearfix"&gt;
                          &lt;div class="spark-info"&gt;&lt;span class="number"&gt;17345&lt;/span&gt;Views&lt;/div&gt;
                          &lt;div id="spark-templateviews" class="sparkline"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="spark clearfix"&gt;
                          &lt;div class="spark-info"&gt;&lt;span class="number"&gt;3700$&lt;/span&gt;Sales&lt;/div&gt;
                          &lt;div id="spark-sales" class="sparkline"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;!-- Start .row --&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-lg-12"&gt;
                      &lt;!-- col-lg-12 start here --&gt;
                      &lt;div class="panel panel-default plain toggle panelMove panelClose panelRefresh"&gt;
                          &lt;!-- Start .panel --&gt;
                          &lt;div class="panel-heading"&gt;
                              &lt;h4 class="panel-title"&gt;Basic Data tables&lt;/h4&gt;
                          &lt;/div&gt;
                          &lt;div class="panel-body"&gt;
                              &lt;div class="form-group"&gt;
                                  &lt;label class="col-lg-2 col-md-3 control-label" for=""&gt;Employee id&lt;/label&gt;
                                  &lt;div class="col-lg-10 col-md-9"&gt;
                                      &lt;input id="empid" ng-model="searchedDetail.id" type="text" class="form-control" name="empid" /&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;!-- End .form-group  --&gt;
  
                              &lt;div class="form-group"&gt;
                                  &lt;label class="col-lg-2 col-md-3 control-label" for=""&gt;Employee name&lt;/label&gt;
                                  &lt;div class="col-lg-10 col-md-9"&gt;
                                      &lt;input  id="ename" ng-model="searchedDetail.ename" type="text" class="form-control" name="ename"&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;!-- End .form-group  --&gt;
                              &lt;div class="row"&gt;
                                  &lt;div class="col-lg-9 col-sm-9 col-xs-12 col-sm-offset-3"&gt;
                                      &lt;button id="btnSearch" type="submit" ng-click="searchb()" class="btn btn-default pad"&gt;Search&lt;/button&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;table id="basic-datatables" class="table table-striped table-bordered" cellspacing="0" width="100"&gt;
                                  &lt;thead&gt;
                                      &lt;tr&gt;
                                          &lt;th&gt;First Name&lt;/th&gt;
                                          &lt;th&gt;Last Name&lt;/th&gt;
                                          &lt;th&gt;Date Of Birth&lt;/th&gt;
                                          &lt;th&gt;Gender&lt;/th&gt;
                                          &lt;th&gt;email&lt;/th&gt;
                                          &lt;th&gt;mobile no&lt;/th&gt;
                                          &lt;th&gt;designation&lt;/th&gt;
                                          &lt;th&gt;date of join&lt;/th&gt;
                                          &lt;th&gt;nic&lt;/th&gt;
                                          &lt;th&gt;department name&lt;/th&gt;
                                      &lt;/tr&gt;
                                  &lt;/thead&gt;
                                  &lt;tbody&gt;
                                      &lt;tr ng-repeat="emp in employes" style="text-align:center"&gt;
                                          &lt;td&gt;{{emp.fname}}&lt;/td&gt;
                                          &lt;td&gt;{{emp.lname}}&lt;/td&gt;
                                          &lt;td&gt;{{emp.DOB}}&lt;/td&gt;
                                          &lt;td&gt;{{emp.gender}}&lt;/td&gt;
                                          &lt;td&gt;{{emp.email}}&lt;/td&gt;
                                          &lt;td&gt;{{emp.mobile_no}}&lt;/td&gt;
                                          &lt;td&gt;{{emp.designation}}&lt;/td&gt;
                                          &lt;td&gt;{{emp.date_of_join}}&lt;/td&gt;
                                          &lt;td&gt;{{emp.nic}}&lt;/td&gt;
                                          &lt;td&gt;{{emp.department_name}}&lt;/td&gt;
                                      &lt;/tr&gt;
                                  &lt;/tbody&gt;
                              &lt;/table&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;!-- End .panel --&gt;
                  &lt;/div&gt;
                  &lt;!-- col-lg-12 end here --&gt;
              &lt;/div&gt;
              &lt;!-- End .row --&gt;
          &lt;/div&gt;
          &lt;!-- End .page-content-inner --&gt;
      &lt;/div&gt;
      &lt;!-- / page-content-wrapper --&gt;
  &lt;/div&gt;
  &lt;!-- / page-content --&gt;
  </code></pre>