javascript - 使用 typeahead.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));
                }
            });
        }
    });

这是我的 Angular Controller

(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);

            });

        };

    }

})();

最后是 html

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

帮助将不胜感激。我问这个问题有一段时间了，但没有结果。那么任何人都可以帮助我吗？提前致谢。

Answer 1

如果您查看几周前我使用 typeahead 编写的代码示例 codepen ，您可以 fork 它来更改参数等...

我认为对您来说最有趣的部分是处理数据的猎犬。尝试一下，并对您在 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
});