Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
586 views
in Technique[技术] by (71.8m points)

javascript - 如何添加自动完成功能以使用angularjs和远程数据库搜索输入文本?(How to add autocomplete to search input text with angularjs and remote database?)

I wrote a search engine that works with a remote db server and draws records from it.(我写了一个与远程数据库服务器一起工作的搜索引擎,并从中获取记录。)

I want to add AUTO COMPLETE to INPUT.(我想将“自动完成”添加到“输入”中。) I tried using the Angularjs tool (mark on code) and for some reason it didn't work for me.(我尝试使用Angularjs工具(在代码上标记),由于某种原因,它对我不起作用。) Can anyone tell me why?(谁能告诉我为什么?) if there is a simpler approach to coding this feature I would love to hear too(如果有更简单的方法来编码此功能,我也想听听) JS(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); }); }; }]); html(html) <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>   ask by meyt translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

You can use simple typeahead instead of using directive, got through the code below :(您可以通过以下代码使用简单的typeahead而不是使用指令:)

HTML Code:(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> Angular Code:(角度代码:) $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; }; That's it, this will solve your problem.(就是这样,这将解决您的问题。) Just a small suggestion which I want to give you which I am sure you must have thought is that build your back end query in such a way that your database returns the suggestions like in MySql we have query like this :(我想给您的只是一个小建议,我确定您必须想到的是,以这样的方式构建后端查询,即您的数据库返回像MySql这样的建议,我们这样查询:) Consider you have a table by name employee where you want to put a typeahead on employee name and you have a field called 'name' in your table where you are storing employees name, so your query will be(假设您有一个按名称命名的表employee,您想在该表上输入一个雇员姓名,并且在表中有一个名为“ name”的字段,用于存储雇员的姓名,因此查询将) SELECT * from employee WHERE lower(name) LIKE '%a%'; This query will return all the employees whose name has 'a' letter in them, So I hope your $scope.searchJob() function also returns data in this way.(此查询将返回名称中带有“ a”字母的所有雇员,因此,我希望您的$ scope.searchJob()函数也以这种方式返回数据。) Give this a try, I hope this solves your problem.(试试看,希望这可以解决您的问题。)

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...