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

            });

        };

    }

})();

最后是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，你可以把它分叉来改变参数等......

我认为对你来说最有趣的部分是猎犬处理数据。试试这个，然后进行你的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
});

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

1 个答案: