使用typehead.js搜索数据并使用ajax进行检索？

Question

我有一个旧的autocomplete.js代码和修改，我试图将其迁移到typehead.js。问题是我没有找到任何类似于angular和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)); 
       } 
      }); 
     } 
    }); 

这里是我这个

(function() { 
    'use strict'; 

    angular 
     .module('efutures.hr.controllers.Search', []) 
     .controller('SearchController', SearchController); 

    SearchController.$inject = ['$scope', '$location', '$rootScope', '$http', 'AuthenticationService', 'SearchService']; 
    function SearchController($scope, $location, $rootScope, $http, AuthenticationService, SearchService) { 

     (function initController() { 
     })(); 

     $scope.searchb = function() { 
      $scope.searchedDetail.id 
      var empid = { 
       id: $scope.searchedDetail.id || 'default', 
       name: $scope.searchedDetail.ename || 'default' 
      }; 
      SearchService.search(empid, function (res) 
      { 
       console.log(res.data); 
       $scope.empdetails = JSON.parse(res.data); 

      }); 

     }; 

    } 

})(); 

角控制器最后

<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> 
} 

帮助将不胜感激的HTML。我一直在问这个问题很长时间没有结果。所以任何人都可以帮助我。提前致谢。

Answer 1

如果你看一下我的预输入几个星期前codepen这样做的代码示例，您可以派生它改变参数等...

我觉得最有趣的部分你有处理猎犬数据。试试这个，做你的ajax调用中你的api url所需的修改。

var carData = new Bloodhound({ 
    remote: { 
    url: 'https://api.github.com/users/%QUERY/repos', 
    wildcard: '%QUERY' 
    }, 
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'), 
    queryTokenizer: Bloodhound.tokenizers.whitespace 
}); 

$('#empid').typeahead({ 
    minLength: 1, 
    }, { 
    name: 'cars', 
    display: 'full_name', //your display property here from the json 
    source: carData 
});