如何添加自動完成功能以使用 angularjs 和遠程數據庫搜索輸入文本？

Question

我編寫了一個與遠程數據庫服務器一起使用並從中提取記錄的搜索引擎。 我想將 AUTO COMPLETE 添加到 INPUT。 我嘗試使用 Angularjs 工具（標記在代碼上），但出於某種原因它對我不起作用。 誰能告訴我為什么？ 如果有更簡單的方法來編寫此功能，我也很想聽聽

JS


var myapp = angular.module("myapp", ['ngRoute']);

myapp.controller("homeController", ['$scope', '$http',function ($scope, $http) {   

//new section:////
$scope.query = function (searchText) {
            return $http
                .get('http://localhost:59836/api/Jobs/searchjobs/' + searchText)
                .then(function (data) {

                    return data;
                });
        };
    ////

    $scope.search = function (inSearch) {
        $scope.inSearch = inSearch;
        $http({
            method: "GET",
            url: "http://localhost:59836/api/Jobs/searchjobs/" + $scope.inSearch

        }).then(function Success(response) {

            $scope.jobs = JSON.parse(response.data);       

        }, function Error(response) {
                alert(response.statusText);
        });

    };

}]);

網頁格式


<body>

    <div ng-controller="homeController">
        <div class="row">
            <div class="col-md-9 col-md-offset-1">
                <div style="background-color:#1d1a1a; padding:4%;" class="input-group">
                    <input type="text" class="form-control" placeholder="Job title or keywords" ng-model="inSearch" />
///////new section:///////////
                    <md-autocomplete md-selected-item="selectedItem" md-search-text="inSearch" md-items="item in query(inSearch)">
                        <md-item-template>
                            <span md-highlight-text="inSearch">{{item}}</span>
                        </md-item-template>
                    </md-autocomplete>
//////////////////////////////////////
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-default" ng-click="search(inSearch)">
                            <span class="glyphicon glyphicon-search">
                                <span class="sr-only">Search</span>
                            </span>
                        </button>
                    </span>
                </div>

                <div ng-repeat="job in jobs">
                    <a href="#" class="list-group-item">
                        <h2 style="color:dodgerblue">{{job.JobTitleText}}</h2>
                        <h4>{{job.job_description}}</h4>
                    </a>
                </div>
            </div>
        </div>
    </div>

</body>
</html>

Answer 1

您可以使用簡單的 typeahead 而不是 using 指令，通過以下代碼獲得：

HTML 代碼：

<input class="form-control" placeholder="Job Title / Keywords"
            uib-typeahead="job.JobTitleText as job.JobTitleText for jobs in searchJob($viewValue)"
            typeahead-on-select="setJob($item)"
            typeahead-editable="false"
            typeahead-loading="loadingJobs" 
            typeahead-no-results="noJobsFound"
            ng-model="inSearch" required=""/>
<div>
    <p ng-show="noJobsFound">No JobsFound</p>
    <p ng-show="loadingJobs">Loading...</p>
</div>

角度代碼：

$scope.setJob = function (job) {
//If your http response return object then write 'job.JobTitleText' or if it returns simple string then you write 'job'
    $scope.inSearch = job.job.JobTitleText; //This is considering response is object
};
$scope.searchJob = function (searchTerm) {
    return $http({
            method: "GET",
            url: "http://localhost:59836/api/Jobs/searchjobs/" + searchTerm

        }).then(function Success(response) {

            $scope.jobs = JSON.parse(response.data);       

        }, function Error(response) {
                alert(response.statusText);
        }).$promise;
};

就是這樣，這將解決您的問題。 只是我想給你的一個小建議，我相信你一定已經想到了，以這樣一種方式構建你的后端查詢，使你的數據庫返回像在 MySql 中的建議，我們有這樣的查詢：

假設您有一個員工姓名表，您希望在其中提前輸入員工姓名，並且您在存儲員工姓名的表中有一個名為“姓名”的字段，因此您的查詢將是

SELECT * from employee WHERE lower(name) LIKE '%a%';

此查詢將返回名稱中包含“a”字母的所有員工，因此我希望您的 $scope.searchJob() 函數也以這種方式返回數據。

試試這個，我希望這能解決你的問題。

如何添加自動完成功能以使用 angularjs 和遠程數據庫搜索輸入文本？

問題描述

1 個解決方案

解決方案1
1 已采納 2019-11-29 10:49:53

如何添加自動完成功能以使用 angularjs 和遠程數據庫搜索輸入文本？

問題描述

1 個解決方案

解決方案1 1 已采納 2019-11-29 10:49:53

解決方案1
1 已采納 2019-11-29 10:49:53