Как правильно использовать typeahead.js для автозаполнения и получения данных?

Question

У меня есть старый код autocomplete.js, и с изменением я попытался перенести его на typehead.js. Проблема в том, что я не нашел результатов, подобных угловым и ajax.

Вот мой сценарий.

$('#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)); 
       } 
      }); 
     } 
    }); 

Итак, как правильно это сделать. Помощь будет высоко оценена.

Привет, добавлен html-скрипт. Все еще не мог позволить ему работать. Вы можете помочь?

<script src="../../js/form-search.js"></script> 
<!-- .page-content --> 
<div ng-controller="SearchController" class="page-content clearfix"> 
    <!-- .page-content-wrapper --> 
    <div class="page-content-wrapper"> 
     <div class="page-content-inner"> 
      <!-- Start .page-content-inner --> 
      <div id="page-header" class="clearfix"> 
       <div class="page-header"> 
        <h2>Search Employee</h2> 
        <span class="txt">Search and manage employees</span> 
       </div> 
       <div class="header-stats"> 
        <div class="spark clearfix"> 
         <div class="spark-info"><span class="number">2345</span>Visitors</div> 
         <div id="spark-visitors" class="sparkline"></div> 
        </div> 
        <div class="spark clearfix"> 
         <div class="spark-info"><span class="number">17345</span>Views</div> 
         <div id="spark-templateviews" class="sparkline"></div> 
        </div> 
        <div class="spark clearfix"> 
         <div class="spark-info"><span class="number">3700$</span>Sales</div> 
         <div id="spark-sales" class="sparkline"></div> 
        </div> 
       </div> 
      </div> 
      <!-- Start .row --> 
      <div class="row"> 
       <div class="col-lg-12"> 
        <!-- col-lg-12 start here --> 
        <div class="panel panel-default plain toggle panelMove panelClose panelRefresh"> 
         <!-- Start .panel --> 
         <div class="panel-heading"> 
          <h4 class="panel-title">Basic Data tables</h4> 
         </div> 
         <div class="panel-body"> 
          <div class="form-group"> 
           <label class="col-lg-2 col-md-3 control-label" for="">Employee id</label> 
           <div class="col-lg-10 col-md-9"> 
            <input id="empid" ng-model="searchedDetail.id" type="text" class="form-control" name="empid" /> 
           </div> 
          </div> 
          <!-- End .form-group --> 

          <div class="form-group"> 
           <label class="col-lg-2 col-md-3 control-label" for="">Employee name</label> 
           <div class="col-lg-10 col-md-9"> 
            <input id="ename" ng-model="searchedDetail.ename" type="text" class="form-control" name="ename"> 
           </div> 
          </div> 
          <!-- End .form-group --> 
          <div class="row"> 
           <div class="col-lg-9 col-sm-9 col-xs-12 col-sm-offset-3"> 
            <button id="btnSearch" type="submit" ng-click="searchb()" class="btn btn-default pad">Search</button> 
           </div> 
          </div> 
          <table id="basic-datatables" class="table table-striped table-bordered" cellspacing="0" width="100"> 
           <thead> 
            <tr> 
             <th>First Name</th> 
             <th>Last Name</th> 
             <th>Date Of Birth</th> 
             <th>Gender</th> 
             <th>email</th> 
             <th>mobile no</th> 
             <th>designation</th> 
             <th>date of join</th> 
             <th>nic</th> 
             <th>department name</th> 
            </tr> 
           </thead> 
           <tbody> 
            <tr ng-repeat="emp in employes" style="text-align:center"> 
             <td>{{emp.fname}}</td> 
             <td>{{emp.lname}}</td> 
             <td>{{emp.DOB}}</td> 
             <td>{{emp.gender}}</td> 
             <td>{{emp.email}}</td> 
             <td>{{emp.mobile_no}}</td> 
             <td>{{emp.designation}}</td> 
             <td>{{emp.date_of_join}}</td> 
             <td>{{emp.nic}}</td> 
             <td>{{emp.department_name}}</td> 
            </tr> 
           </tbody> 
          </table> 
         </div> 
        </div> 
        <!-- End .panel --> 
       </div> 
       <!-- col-lg-12 end here --> 
      </div> 
      <!-- End .row --> 
     </div> 
     <!-- End .page-content-inner --> 
    </div> 
    <!--/page-content-wrapper --> 
</div> 
<!--/page-content --> 

Answer 1

Вот полный рабочий раствор

function BindEmployeeTypeAhead() { 
    $.ajax({ 

     type: "POST", 
     url: "http://localhost:2222/api/search/PostSearch", 
     contentType: 'application/json; charset=utf-8', 
     dataType: 'json', 
     success: SuccessBindEmployeeTypeAhead, 
     error: FailureBindEmployeeTypeAhead 
    }); 
} 
function SuccessBindEmployeeTypeAhead(response) { 
    try { 


     if (response == "") 
      return; 
     var dataSource = new Bloodhound({ 
      datumTokenizer: Bloodhound.tokenizers.obj.whitespace('EmployeeID', 'EmployeeName'), 
      queryTokenizer: Bloodhound.tokenizers.whitespace, 
      local: JSON.parse(response) 

     }); 

     dataSource.initialize(); 

     $("#empid").typeahead({ 
      hint: true, 
      highlight: true, 
      minLength: 1 
     }, 
     { 

      display: function (item) { 
       return item.EmployeeName //Name of property to be shown 
      }, 
      source: dataSource.ttAdapter(), 
      suggestion: function (data) { 
       return '<div>' + data.EmployeeName + '–' + data.EmployeeID + '</div>' 
      } 
     }); 
    } 
    catch (e) { 

    } 
} 
function FailureBindEmployeeTypeAhead() { 
}