具有结构化值的 AngularJS Typeahead答案

【问题标题】：AngularJS Typeahead with structured values具有结构化值的 AngularJS Typeahead
【发布时间】：2019-02-17 03:28:34
【问题描述】：

我有一个来自here 示例的工作输入元素，非常简单并且完美运行。

现在，我的问题是我需要处理的数据实际上有两个数据元素，比如{"Index":"<Index>","Value":"<Name>"}。

我需要在列表中显示一个像<index> - <Name> 这样的字符串，允许用户键入任何组合，包括索引和/或值的一部分，并且在选择时只保留索引（这是唯一的唯一列表的一部分）。

我将上述示例中的列表修改为：

var States = JSON.parse('[{"Index":"1","Value":"Alabama"},      ' +
                        '{"Index":"2","Value":"Alaska"},        ' +
                        '{"Index":"3","Value":"Arizona"},       ' +
                        '{"Index":"4","Value":"Arkansas"},      ' +
                        '{"Index":"5","Value":"California"},    ' +
                        '{"Index":"6","Value":"Colorado"},      ' +
                        '{"Index":"7","Value":"Connecticut"},   ' +   
                        '{"Index":"8","Value":"Delaware"},      ' +
                        '{"Index":"9","Value":"Florida"},       ' +
                        '{"Index":"10","Value":"Georgia"},      ' +
                        '{"Index":"11","Value":"Hawaii"},       ' +
                        '{"Index":"12","Value":"Idaho"},        ' +
                        '{"Index":"13","Value":"Illinois"}]     '   ) ;

并将 HTML 设置为：

        <input name="states" 
               id="states" 
               type="text" 
               placeholder="enter a state" 
               ng-model="selected" 
               value="(state.Index)" 
               typeahead="(state.Value) for state in states | filter:$viewValue | limitTo:8" 
               class="form-control">

它没有做这项工作。

总而言之，预输入列表中的条目应如下所示：

1 - Alabama
2 - Alaska
...

当用户选择一个条目（比如第一个条目）时，脚本中收到的值应该是“1”（而不是“1 - Alabama”）。

编辑

我在下面实现了 tanmay 建议的代码，但不知何故，它对我不起作用。而不是得到（例如）6 - Colorado 我只得到一个-，这意味着没有数字（索引）或州名。有趣的是，显示的选项数量确实与我输入的内容相符（意思是，如果我输入 m，我只会得到一条 - 的记录，对应于 Alabama）。

这里是整个 HTML 和 JS 文件：

HTML：

<!DOCTYPE html>
<html lang="en-us">
    <head>
        <meta charset="utf-8">
        <meta name="viewpoint" content="with=device-width initial-scale=1.0">
        <meta http-equiv="CACHE-CONTROL" content="NO-CACHE">

        <title>MyTest - Partial</title>
        <script src="Public_Libs/JQuery/jquery.js"></script>

        <script src="Public_Libs/Bootstrap/js/bootstrap.min.js"></script>
        <script src="Public_Libs/Bootstrap/js/bootstrap-select.min.js"></script>

        <link rel="stylesheet" href="Public_Libs/Bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="Public_Libs/Bootstrap/css/bootstrap-select.min.css">
        <link rel="stylesheet" href="Public_Libs/Bootstrap/css/bootstrap-theme.min.css">

        <script src="Public_Libs/Angular/angular.min.js"></script>
        <script src="Public_Libs/Angular/angular-route.min.js"></script>
        <script src="Public_Libs/Angular/angular-sanitize.min.js"></script>
        <script src="Public_Libs/Angular/angular-ui-bootstrap.min.js"></script>

        <script src="Index_Controller.js"></script>

    </head>

    <body>
        <div ng-app="angularTypeahead">
          <script type="text/ng-template" id="customTemplate.html">
            <a>
                <span bind-html-unsafe="match.label.Index | typeaheadHighlight:query"></span>   - 
                <span bind-html-unsafe="match.label.Value | typeaheadHighlight:query"></span>   
            </a>
          </script>
          <div class="container-fluid" ng-controller="TypeaheadCtrl">
              <h2><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/angular-logo.svg" alt="Angular.js Logo"> Angular.js Typeahead</h2>
              <div class="form-group">
                  <label for="states">Search for US States</label>
                  <input name="states" id="states" type="text" 
                         typeahead-template-url="customTemplate.html"
                         placeholder="enter a state" ng-model="selected" 
                         typeahead="state.Index as state for state in states | filter:$viewValue | limitTo:8" 
                         class="form-control">
              </div>
              <pre>{{selected}}</pre>
              <button class="btn btn-success" type="submit">Submit</button>
          </div>
        </div>        
    </body>
</html>

JS：

// https://angular-ui.github.io/

// setup app and pass ui.bootstrap as dep
var myApp = angular.module("angularTypeahead", ["ui.bootstrap"]);

// define factory for data source
  myApp.factory("States", function() {
    var states = JSON.parse('[{"Index":"1","Value":"Alabama"},      ' +
                          '{"Index":"2","Value":"Alaska"},        ' +
                          '{"Index":"3","Value":"Arizona"},       ' +
                          '{"Index":"4","Value":"Arkansas"},      ' +
                          '{"Index":"5","Value":"California"},    ' +
                          '{"Index":"6","Value":"Colorado"},      ' +
                          '{"Index":"7","Value":"Connecticut"},   ' +   
                          '{"Index":"8","Value":"Delaware"},      ' +
                          '{"Index":"9","Value":"Florida"},       ' +
                          '{"Index":"10","Value":"Georgia"},      ' +
                          '{"Index":"11","Value":"Hawaii"},       ' +
                          '{"Index":"12","Value":"Idaho"},        ' +
                          '{"Index":"13","Value":"Illinois"}]     '   ) ;

    return states;

});

// setup controller and pass data source
myApp.controller("TypeaheadCtrl", function($scope, States) {

  $scope.selected = undefined;

  $scope.states = States;

});

我如何复制示例的代码（请参阅 tanmay 答案中的链接）以使其对我不起作用？

【问题讨论】：

标签： javascript angularjs typeahead

【解决方案1】：

我将您的 input 更改为包含这样的自定义模板：

<input name="states" id="states" type="text" 
       typeahead-template-url="customTemplate.html"
       placeholder="enter a state" ng-model="selected" 
       typeahead="state.Index as state for state in states | filter:$viewValue | limitTo:8" 
       class="form-control">

模板看起来像这样：

<script type="text/ng-template" id="customTemplate.html">
  <a>
    <span bind-html-unsafe="match.label.Index | typeaheadHighlight:query"></span> - 
    <span bind-html-unsafe="match.label.Value | typeaheadHighlight:query"></span>   
  </a>
</script>

请注意，我使用了您提供的 States，因此我希望自定义模板有意义。

这是一个forked codepen，它的行为应该如你所愿。我有一个pre，在它下面显示ng-model，它只包含数字（比如4）而不是整个4 - <State>

编辑：或者更好的是，您仍然可以在input 中显示状态名称并仅使用索引（selected.Index）。 Sample codepen 。

【讨论】：

感谢@tanmay 的回复。您的建议正确显示条目并正确返回索引，但不允许使用索引和值的组合。看？我需要它也应该可以开始输入 Index 部分，这样如果我输入 1 列表将打开，其中包含阿拉巴马州、乔治亚州、夏威夷州等条目。，伊利诺伊州。
我把你的例子（分叉的codepen）按原样（或者我相信），它仍然对我不起作用。我编辑了我的问题并添加了源 HTML 和 JS。如果您能看一下并让我知道我怎么会错误地复制它，将不胜感激。
您能否简要介绍一下我对最初问题所做的修改？我采用了您按原样制作的代码，但它对我不起作用。谢谢！！！
@FDavidov 如果它在 codepen 上工作，可能在复制时可能会出现一些小错误。也许根据 codepen 从头开始，看看你错过了什么。或者如果这不起作用，请使用相关代码提出一个单独的问题，以便如果我找不到问题所在，至少其他人会
@tanman 感谢您的回复。我将尝试将您的 codepen 中的代码与我正在检查的代码进行比较，尽管我 字面上 按原样复制粘贴它，根本没有任何变化。这让我很困惑。还是谢谢。