typeahead fetch data from url key and api angularjs

Question

Hi I am new to Angularjs. I am trying to create a typeahead where I am fetching the data through the api. I tried searching for the solution but I dint get the solution what I was looking for. Below is the code what I have done so far. HTML CODE:

<div ng-controller="newController">
    <div class="selection-box">
        <div class="title-box">
            <div class="search_item">
                <input name="document" ng-model='query' type="text" typeahead="document as document.name for document in documents | filter:query | limitTo:8" id='document' placeholder="SEARCH FOR YOUR DOCUMENT" class="search_box">
            </div>
            {{query}}
        </div>
    </div>
</div>

In this input box whatever I type it gets printed in the {{query}} but doesn't show any data fetching from the api. I am using bootstrap ui . Below is the controller what I wrote.

newController.js:

var myApp = angular.module('myModule', ['ui.bootstrap']);

myApp.service("searchService", function ($http) {
     var apiUrl = "http://12.56.677/api/v1/mobile/";
     var apiKey = "123nm";
     this.searchDocument = function(query) {
         var response = $http({
         method: 'post',
         url: apiUrl + "search",
         headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
         params: {
           key: apiKey,
           query: query
         }
      });
      return response;
    };
});

myApp.controller('newController', ['$scope', 'searchService' , function($scope, searchService, $rootScope, $http, $window, $document) {
    var apiUrl = "http://12.56.677/api/v1/mobile/";
    var apiKey = "123nm";
    url = apiUrl + "search";
    Key = apiKey;
    $scope.query  = undefined;
    console.log(query);
    searchService.searchDocument(query='').then (function (res) {
    if(res.data.status == "OK")
    {

        $scope.documents = res.data.result;
        console.log($scope.documents);
        // var userinformation = res.data.result;
        // $window.localStorageService.setItem('searchDocument',      JSON.stringify(query));
     }
     else {

         $scope.errorMessage = res.data.message;
     }
  })
 }])

Any help would be appreciated.

Answer 1

  //HTML
  <input name="document" 
   ng-model='query' type="text" 
   uib-typeahead="document as document.name 
   for document in documents  |filter:query | limitTo:8" id='document' 
   placeholder="SEARCH FOR YOUR DOCUMENT" class="search_box">

  //Controller
  searchService.searchDocument('').then (function (res) {
    if(res.data.status == "OK"){
      $scope.documents = res.data.result;
    }
    else {
     $scope.errorMessage = res.data.message;
    }
  });

Answer 2

What you attempted to do is using typeahead with a pre-fetched list (an with an empty query).

You probably want to do asynchronous search and would need a data fetch function to do so.

HTML, note the typeahead expression:

<input name="document" ng-model='query' type="text" 
       typeahead="document as document.name for document in (getDocuments() | limitTo:8)" 
       id='document' 
       placeholder="SEARCH FOR YOUR DOCUMENT" class="search_box">

Controller:

myApp.controller('newController', ['$scope', 'searchService' , function($scope, searchService, $rootScope, $http, $window, $document) {
    var apiUrl = "http://12.56.677/api/v1/mobile/";
    var apiKey = "123nm";

    // What are these two undeclared variables lying here around for?
    url = apiUrl + "search";
    Key = apiKey;

    $scope.getDocuments = function(query){
        searchService.searchDocument(query) // Check your API, I am not sure how you're API treats these parameters
            .then (function (res) {
                if(res.data.status == "OK")
                {
                    var documents = res.data.result;
                    console.log(documents);
                    return documents;
                }
                else {
                    $scope.errorMessage = res.data.message;
                    return [];
                }
            })
    }
}])

Answer 3

我认为您需要从searchService.searchDocment（）返回承诺，如下所示：

return searchService.searchDocument(query='').then(......)