Question

这是一个简单的Angular自动提示的JS：

var app = angular.module('typeAhead', []);

app.controller('TestCtrl', function($scope) {
    $scope.things = [
        { name: "foo", description: "not just any foo" },
        { name: "bar", description: "a bar, in so many words" },
        { name: "gronk", description: "gronk was a wildcat before he was a patriot" },
        { name: "fleebles", description: "i dunno. fleebles just rolls off the tongue for me" },
        { name: "sepulveda", description: "i think 'sepulveda' is a real word with a real meaning" },
        { name: "crinkle", description: "crinkle, since 2008" }
    ];

    $scope.selected;

    $scope.choose = function(thing) {
        $scope.selected = thing;
        $scope.searchForm.$setPristine();
    }
});

...和html：

<body ng-app="typeAhead" ng-controller="TestCtrl">

    <form name="searchForm" novalidate>
        <input type="text" ng-model="selected">
        <span>{{selected.description}}</span>
    </form>

    <div ng-if="selected">
        <div class="result" ng-repeat="thing in filtered = (things | filter:selected)" ng-click="choose(thing)">{{thing.name}}</div>
    </div>

</body>

这似乎首先起作用，输入时遇到2个问题：

键入一些字母，然后清除所有内容，完整列表显示为结果。如果没有搜索文本，预期行为将没有结果
搜索正在查询thing.name和thing.description，这很好，但是我需要它来优先处理名称匹配而不是描述匹配

一旦做出选择，还有3个新问题：

建议不会消失
文本字段显示[Object object]
模型被炸毁，因此后续搜索不起作用

如果我将输入的ng-model更改为selected.name，则做出选择会修复文本显示，但之后只会搜索名称。

这是插件：http://plnkr.co/edit/BcyfGnTGW6NFpf9jm7Mq?p=preview

对我来说很明显，通过管道进入过滤器有很多可用的功能，但据我所知，他们焚烧了文档，并且编写了编写它的可怜的schlep，所以我不知道有哪些选项和方法是可用，无论是战略还是语法。

请不要建议我使用UI-Bootstrap的Typeahead指令;它真棒，但我的实例大大简化了实际项目的需求，UI-Bootstrap不能满足我的一些自定义需求。

Answer 1

您正在使用带有$scope.selected变量的搜索输入字段作为ng-model（此时为字符串文字），然后在调用choose(thing)函数后调用{{1成为一个对象。这就是为什么您的输入会显示$scope.selected。

所以首先要解决搜索输入字段和保存所选项目的对象。您的搜索表单有自己的模型：searchText。

[object Object]

接下来是您的过滤器。我已将ng-repeat更新为以下内容：

<form name="searchForm" novalidate>
  <input type="text" ng-model="searchText">
  <span>{{selected.description}}</span>
</form>

要显式搜索名称字段，您可能已经注意到<div ng-if="searchText"> <div class="result" ng-repeat="thing in things | filter: {name: searchText}" ng-click="choose(thing)"> {{thing.name}} </div> </div>上的属性选择 - 这反过来只是过滤了与输入值相匹配的名称属性。

这是plnkr。

更新由于来自grilchgristle 7月1日22:09

那么，我引入了一个新的变量filter: {name: searchText}，当用户更改searchText时，这是真的。当用户选择条目时，isUserSearching设置为false - 然后隐藏搜索结果。只要用户在搜索字段中更改了某些内容，isUserSearching变量就会再次设置为true，并显示搜索结果。请参阅plnkr.co/edit/UE7wFjAztUNFqzXpPEvu?p=preview。

关于过滤器：你需要编写自己的过滤器，首先按名称对数组进行排序，然后按描述排序。见docs.angularjs.org/api/ng/filter/filter

Autosuggest使用ng-model和过滤器

1 个答案: