Question

我的应用程序正在使用Angular-Bootstrap-UI-Typeahead功能进行自动完成。

当用户输入时，我希望能够调用API＆amp;返回相似的字符串

我已按照指南here进行了操作，所有内容都适用于开箱即用的Google API。

我还成功交换了自己的API：我可以调用API，获取数据，并在浏览器控制台中以正确的格式记录它。

但是，我经常从文本框中找到“未找到结果”。 我怀疑这可能是select指令的问题，但我很难过。

我非常感谢任何指导！

以下是一些代码：

UI（content.html）

<h4>biz results</h4>
<pre>Model: {{user.orgName | json}}</pre>
<input type="text" 
ng-model="user.orgName" 
placeholder="Locations loaded via $http" 
uib-typeahead="obj for obj in getLocation($viewValue)" 
typeahead-loading="loadingBiz" 
typeahead-no-results="noBiz" class="form-control"
typeahead-wait-ms="700">
<i ng-show="loadingBiz" class="glyphicon glyphicon-refresh"></i>
<div ng-show="noBiz">
<i class="glyphicon glyphicon-remove"></i> No Results Found
</div>

Angular（script.js）

$scope.getLocation = function(val) {
var bizRequest = $http.post('/sample', {
  // var bizRequest = $http.post('/biz', {
      orgName: val,
      limit: 5
    }
  ).success(function(response){
    console.log(response)
    //console.log('Biz response: ' + JSON.stringify(response))
    //console.log(response.data.fields.map(item))
    var bizArray = response.data.fields.map(function(item){
      return item.fields.orgName;
    });
    console.log(bizArray);
    return bizArray;
  });
  console.log("Biz Request /////// " + JSON.stringify(bizRequest))
  return bizRequest
};

节点API（app.js）

app.post('/sample', function(req, res){

var resp = {
"success": true,
"data": {
    "fields": [{
        "fields": {
            "scid": "1111",
            "orgName": "1111",
            "countryCode": "1",
            "countryName": "1",
            "cityName": "1",
            "addressLine": "1111"
        },
        "matchedRule": {
            "duplicateLevel": "POTENTIAL_MATCH",
            "id": "18",
            "rank": "1"
        }
    }, {
        "fields": {
            "scid": "2222",
            "orgName": "2222",
            "countryCode": "22",
            "countryName": "22",
            "cityName": "22",
            "addressLine": "2 22"
        },
        "matchedRule": {
            "duplicateLevel": "POTENTIAL_MATCH",
            "id": "18",
            "rank": "1"
        }
    }]
},
"errors": [],
"warnings": [],
"infoMessages": []
}

res.send(JSON.stringify(resp))
})

Answer 1

在处理异步预先处理时，您必须从promise方法返回getLocation。所以不要在那里使用.success来破坏承诺链。相反，使用.then可以帮助您链接承诺，并且可以从.then返回数据以将其传递给typeahead

$scope.getLocation = function(val) {
  var bizRequest = $http.post('/sample', {
  // var bizRequest = $http.post('/biz', {
      orgName: val,
      limit: 5
    }
  ).then(function(data){
    response = data.data; //<-- take data in response.
    console.log(response.data)
    //console.log('Biz response: ' + JSON.stringify(response))
    //console.log(response.data.fields.map(item))
    var bizArray = response.data.fields.map(function(item){
      return item.fields.orgName;
    });
    console.log(bizArray);
    return bizArray;
  });
  console.log("Biz Request /////// " + JSON.stringify(bizRequest))
  return bizRequest
};

Asynchronous Angular-bootsrap-UI typeahead：select指令问题

1 个答案: