如何在输入字段中使用 typeahead 来获取 Angularjs 中的值？答案

【问题标题】：How Can I Use typeahead in Input Filed to get the Values in Angularjs?如何在输入字段中使用 typeahead 来获取 Angularjs 中的值？
【发布时间】：2017-04-09 19:23:07
【问题描述】：

我在我的应用程序中使用 MEAN 堆栈，AngularJS 作为我的前端。我如何在输入字段中使用 typeahead 来获取 angularjs 中的值，实际上，如果我们使用 select 选项，我们会得到值，但我们期望 type-ahead 选项...请查看 plunker 以获取参考 My Plunker。

在 plunker 中首先选择用于获取无数组值的选项。
第二个选择选项用于获取user 数组中的值。所以我们使用ng-options="item.user.displayName for item in questions"
但我们希望使用 typeahead 选项来获取 user 数组中的 displayNmae 值。所以我们像typeahead="item as item.user.displayName for item in questions | filter:$viewValue | limitTo:8"一样使用但我们无法得到答案......
如果我们键入下拉菜单需要显示的名称，我们在第三个输入字段中的确切内容...
如果有人知道解决方案，请同时更新 plunker 以了解解决方案。

我的数据：-

$scope.questions = [
{
"_id": "583433ddc021a5d02949a51b",
"user": {
"_id": "5834336ac021a5d02949a51a",
"displayName": "mani R",
"location": "ICF",
"dob": "1991-10-05T18:30:00.000Z",
"religion": "Christian",
"roles": [
"user"
],
"profileImageURL": "modules/users/client/img/profile/default.png"
},
"__v": 0,
"upvoters": [],
"category": "Moral Ethics",
"content": "Dhoni",
"title": "which batsman is best in the world?",
"created": "2016-11-22T12:02:37.376Z"
},
{
"_id": "582c34b3ff26bd603e1e5383",
"user": {
"_id": "58072aba0f82a61823c434df",
"displayName": "Table 1",
"dob": "1991-10-04T18:30:00.000Z",
"location": "Icf",
"religion": "Hindu",
"roles": [
"admin"
],
"profileImageURL": "./modules/users/client/img/profile/uploads/c756711556ab6864f408697c7a98aedc"
},
"__v": 1,
"upvoters": [],
"users": [],
"comments": [
{
"created": 1479365394684,
"email": "ms@e21designs.com",
"name": "Table 1",
"commentText": "Dhoni"
}
],
"friend_tag": [],
"emotion": "Confused",
"category": "Environment & Health",
"content": "sachin?",
"title": "who is best player in this world?",
"created": "2016-11-16T10:28:03.859Z"
},
{
"_id": "582c3418ff26bd603e1e5382",
"user": {
"_id": "582c1f4b53cf7fec2ddf282e",
"displayName": "selvam R",
"dob": "1991-10-04T18:30:00.000Z",
"roles": [
"kp"
],
"profileImageURL": "modules/users/client/img/profile/default.png"
},
"__v": 0,
"upvoters": [],
"category": "Environment & Health",
"content": "he is tennis player",
"created": "2016-11-16T10:25:28.835Z"
},
{
"_id": "582ad554714543e037cf3bf2",
"user": {
"_id": "58072aba0f82a61823c434df",
"displayName": "Table 1",
"dob": "1991-10-04T18:30:00.000Z",
"location": "Icf",
"religion": "Hindu",
"roles": [
"admin"
],
"profileImageURL": "./modules/users/client/img/profile/uploads/c756711556ab6864f408697c7a98aedc"
},
"__v": 1,
"upvoters": [
"ms@e21designs.com"
],
"upvotes": 1,
"category": "Moral Ethics",
"created": "2016-11-15T09:28:52.403Z"
},
{
"_id": "5821e7c667b70aac2b8fdfdc",
"user": {
"_id": "58072aba0f82a61823c434df",
"displayName": "Table 1",
"dob": "1991-10-04T18:30:00.000Z",
"location": "Icf",
"religion": "Hindu",
"roles": [
"admin"
],
"profileImageURL": "./modules/users/client/img/profile/uploads/c756711556ab6864f408697c7a98aedc"
},
"__v": 1,
"upvoters": [
"ms@e21designs.com"
],
"upvotes": 1,
"category": "Religion & Culture",
"created": "2016-11-08T14:57:10.354Z"
}
]

我的 HTML：-

<div style="margin-top: 20px;">
  <label style="color: green;">3. Typeahead Not Working</label>
    <input ng-model="friend" typeahead-min-length="3" typeahead="item as item.user.displayName for item in questions | filter:$viewValue | limitTo:8">

 </div>

我们在 Mr.J-Mean 的帮助下得到了答案，但是我们还有一个问题，如果我们在 Typeahead 输入中输入类似 table 1 的名称，它会显示为三个 Table 1 名称，如果我们有相同的名称名称在我们的数据中意味着我们希望只显示一个名称，例如Table 1 请帮助我们...请在 plunker 中更新您的答案以及了解解决方案...谢谢

【问题讨论】：

你用的是什么预输入插件？
感谢您的评论，我们在这里没有使用 typeahead 插件，请查看我的 plunker 以供参考...谢谢....
那么预输入是如何工作的呢？
如果你知道解决方案请给一些建议和如何使用...谢谢..
这是我推荐的：angular-ui.github.io/bootstrap/#/typeahead

标签： html css angularjs meanjs

【解决方案1】：

要使其正常工作，它需要插件-我使用了UI Bootstrap的Typeahead

请为您的问题找到解决方案

(function () {
    'use strict';

    var app = angular.module('TypeaheadDemo', ['ui.bootstrap', 'ngTagsInput']);

    app.controller('TypeaheadCtrl', function ($scope, $http, $filter) {

        var _selected;
        $scope.questions = [
      {
          "_id": "583433ddc021a5d02949a51b",
          "user": {
              "_id": "5834336ac021a5d02949a51a",
              "displayName": "mani R",
              "location": "ICF",
              "dob": "1991-10-05T18:30:00.000Z",
              "religion": "Christian",
              "roles": [
              "user"
              ],
              "profileImageURL": "modules/users/client/img/profile/default.png"
          },
          "__v": 0,
          "upvoters": [],
          "category": "Moral Ethics",
          "content": "Dhoni",
          "title": "which batsman is best in the world?",
          "created": "2016-11-22T12:02:37.376Z"
      },
      {
          "_id": "582c34b3ff26bd603e1e5383",
          "user": {
              "_id": "58072aba0f82a61823c434df",
              "displayName": "Table 1",
              "dob": "1991-10-04T18:30:00.000Z",
              "location": "Icf",
              "religion": "Hindu",
              "roles": [
              "admin"
              ],
              "profileImageURL": "./modules/users/client/img/profile/uploads/c756711556ab6864f408697c7a98aedc"
          },
          "__v": 1,
          "upvoters": [],
          "users": [],
          "comments": [
          {
              "created": 1479365394684,
              "email": "ms@e21designs.com",
              "name": "Table 1",
              "commentText": "Dhoni"
          }
          ],
          "friend_tag": [],
          "emotion": "Confused",
          "category": "Environment & Health",
          "content": "sachin?",
          "title": "who is best player in this world?",
          "created": "2016-11-16T10:28:03.859Z"
      },
      {
          "_id": "582c3418ff26bd603e1e5382",
          "user": {
              "_id": "582c1f4b53cf7fec2ddf282e",
              "displayName": "selvam R",
              "dob": "1991-10-04T18:30:00.000Z",
              "roles": [
              "kp"
              ],
              "profileImageURL": "modules/users/client/img/profile/default.png"
          },
          "__v": 0,
          "upvoters": [],
          "category": "Environment & Health",
          "content": "he is tennis player",
          "created": "2016-11-16T10:25:28.835Z"
      },
      {
          "_id": "582ad554714543e037cf3bf2",
          "user": {
              "_id": "58072aba0f82a61823c434df",
              "displayName": "Table 1",
              "dob": "1991-10-04T18:30:00.000Z",
              "location": "Icf",
              "religion": "Hindu",
              "roles": [
              "admin"
              ],
              "profileImageURL": "./modules/users/client/img/profile/uploads/c756711556ab6864f408697c7a98aedc"
          },
          "__v": 1,
          "upvoters": [
          "ms@e21designs.com"
          ],
          "upvotes": 1,
          "category": "Moral Ethics",
          "created": "2016-11-15T09:28:52.403Z"
      },
      {
          "_id": "5821e7c667b70aac2b8fdfdc",
          "user": {
              "_id": "58072aba0f82a61823c434df",
              "displayName": "Table 1",
              "dob": "1991-10-04T18:30:00.000Z",
              "location": "Icf",
              "religion": "Hindu",
              "roles": [
              "admin"
              ],
              "profileImageURL": "./modules/users/client/img/profile/uploads/c756711556ab6864f408697c7a98aedc"
          },
          "__v": 1,
          "upvoters": [
          "ms@e21designs.com"
          ],
          "upvotes": 1,
          "category": "Religion & Culture",
          "created": "2016-11-08T14:57:10.354Z"
      }
        ]

        $scope.filterTags = function ($query) {
            var filterList = $filter('filter')($scope.questions, $query);         //filter the data  
            var removedDuplicate = $filter('unique')(filterList, 'user.displayName');//Removed duplicates
            return angular.forEach(removedDuplicate, function (question) {
                question.custName = question.user.displayName;
            });

            return removedDuplicate;
        };
    });

    app.filter('unique', function () {

        return function (items, filterOn) {

            if (filterOn === false) {
                return items;
            }

            if ((filterOn || angular.isUndefined(filterOn)) && angular.isArray(items)) {
                var hashCheck = {}, newItems = [];

                var extractValueToCompare = function (item) {
                    if (angular.isObject(item) && angular.isString(filterOn)) {
                        return item[filterOn];
                    } else {
                        return item;
                    }
                };

                angular.forEach(items, function (item) {
                    var valueToCheck, isDuplicate = false;

                    for (var i = 0; i < newItems.length; i++) {
                        if (angular.equals(extractValueToCompare(newItems[i]), extractValueToCompare(item))) {
                            isDuplicate = true;
                            break;
                        }
                    }
                    if (!isDuplicate) {
                        newItems.push(item);
                    }

                });
                items = newItems;
            }
            return items;
        };
    });
})();

<!doctype html>
<html >
<head>
    <title>Test</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>

    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.2.0.js"></script>

    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.bootstrap.css" />

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.js"></script>
    
</head>
<body ng-app="TypeaheadDemo">
    <div class='container-fluid typeahead-demo' ng-controller="TypeaheadCtrl">

        <div>
            <label>1. Without array value</label>
            <select ng-model="class" ng-options="item.category for item in questions"></select>
        </div>

        <div style="margin-top: 11px;">
            <label>2. With array value</label>
            <select style="margin-left: 20px;" ng-model="class" ng-options="item.user.displayName for item in questions"></select>
        </div>

        <div style="margin-top: 20px;">
            <label style="color: green;">3. Typeahead is Working Now:</label>
            <input ng-model="friend" typeahead-min-length="3" uib-typeahead="item as item.user.displayName for item in questions | filter : $viewValue | unique:'user.displayName'">
        </div>

        <div class="searchinput autosearchinput">
            <tags-input display-property="custName" add-on-enter="true" add-on-blur="true" add-from-autocomplete-only="true" placeholder="tag friends" ng-model="friends" title="tag friends">
                <auto-complete min-length='1' source="filterTags($query)"></auto-complete>
            </tags-input>
        </div>
    </div>
</body>
</html>

【讨论】：

我们还有一个问题，如果我们在 Typeahead 输入中键入像 table 1 这样的名称，它会显示为三个 Table 1 名称，如果我们的数据中有相同的名称意味着我们希望只显示一位Table 1 请帮助我们...请在 plunker 中更新您的答案以了解解决方案....谢谢
已更新解决方案以避免重复表 1。添加新指令 unique 将过滤掉重复的名称。有用的链接github.com/angular-ui/angular-ui-OLDREPO/blob/master/modules/…我也是板球人的忠实粉丝:)
嘿，非常感谢你，你在这个领域真的是天才......但我很努力，先生......请与我保持联系并教我很多......真的很高兴知道你...ms@e21designs.com 有空的时候给我发邮件...谢谢您的回答对我们有用...谢谢....
那么抱歉打扰你了，其实我们为什么使用这个 Typeahead 输入法，实际上我们希望做类似 facebook 标记朋友的概念，所以现在我们可以标记一个朋友，所以我们怎么能在此Typeahead field 上标记multiple friends ？...抱歉打扰了，所以如果您知道解决方案，请帮助我们...我们厌倦了使用ng-list，但它不起作用...请帮助我们...如果您更新 plunker 很容易理解吗？...谢谢..
此链接将帮助您解决问题mbenford.github.io/ngTagsInput。有点忙，无法更新我的解决方案