Javascript 使用ng模型和过滤器使用多个特定对象属性自动建议搜索结果_Javascript_Angularjs_Angular Ngmodel_Angularjs Ng Model

Javascript 使用ng模型和过滤器使用多个特定对象属性自动建议搜索结果

javascript angularjs

Javascript 使用ng模型和过滤器使用多个特定对象属性自动建议搜索结果,javascript,angularjs,angular-ngmodel,angularjs-ng-model,Javascript,Angularjs,Angular Ngmodel,Angularjs Ng Model,下面是一个简单的角度自动建议的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"

下面是一个简单的角度自动建议的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>


{{selected.description}}
{{thing.name}

这看起来一开始是可行的，输入时有两个问题：

键入一些字母，然后清除所有内容，完整列表将显示为结果。如果没有搜索文本，预期的行为将没有结果

搜索同时轮询thing.name和thing.description，这很好，但我需要它将名称匹配优先于描述匹配

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

这些建议并没有消失

文本字段显示

[对象]

模型被放大了，因此后续的搜索不起作用

如果我将输入的

ng model

更改为

selected.name

，进行选择会修复文本显示，但它只会搜索name

下面是一个例子：

对我来说，很明显，通过管道进入过滤器可以获得很多能量，但据我所知，他们销毁了文档，并提供给了编写它的可怜的schlep，所以我不知道有哪些选择和方法可用，无论是策略还是语法

请不要建议我使用UI引导的Typeahead指令；这真是太棒了，但是我这里的例子从我实际项目的需要中大大简化了，UI引导不能满足我的一些自定义需要。

您正在使用搜索输入字段和

$scope.selected

变量作为ng模型（此时是字符串文本），然后在调用

choose（thing）之后

函数-所选的

$scope.selected

将成为一个对象。这就是为什么您的输入会显示

[object object]

因此，第一件事是将搜索输入字段和保存所选项目的对象解耦。您的搜索表单有自己的模型：searchText

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


{{selected.description}}

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

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


{{thing.name}

要显式地只搜索名称字段，您可能已经注意到

过滤器：{name:searchText}

上的属性选择，这反过来只会过滤与输入值匹配的名称属性

这是我的建议

由于7月1日22:09从grilchgristle收到的通知而更新
因此，我引入了一个新变量
isusersearch
，当用户更改searchText时，该变量为true。当用户选择一个条目时，
isusersearch
被设置为false，这将隐藏搜索结果。一旦用户在搜索字段中更改了某些内容，
isusersearch
变量将再次设置为true，并显示搜索结果。参见plnkr.co/edit/UE7wFjAztUNFqzXpPEvu？p=preview
关于过滤器：
您需要编写自己的过滤器，首先按名称，然后按描述对数组进行排序。请参见docs.angularjs.org/api/ng/filter/filter
您正在使用搜索输入字段和
$scope.selected
变量作为ng模型（此时为字符串文本），然后在调用
choose（thing）
函数后，
$scope.selected
成为一个对象。这就是为什么您的输入会显示
[object object]
因此，第一件事是将搜索输入字段和保存所选项目的对象解耦。您的搜索表单有自己的模型：searchText

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

{{selected.description}}
接下来就是你的过滤器。我已将您的ng repeat更新为以下内容：

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

{{thing.name}
要显式地只搜索名称字段，您可能已经注意到
过滤器：{name:searchText}
上的属性选择，这反过来只会过滤与输入值匹配的名称属性
这是我的建议
由于7月1日22:09从grilchgristle收到的通知而更新
因此，我引入了一个新变量
isusersearch
，当用户更改searchText时，该变量为true。当用户选择一个条目时，
isusersearch
被设置为false，这将隐藏搜索结果。一旦用户在搜索字段中更改了某些内容，
isusersearch
变量将再次设置为true，并显示搜索结果。参见plnkr.co/edit/UE7wFjAztUNFqzXpPEvu？p=preview
关于过滤器：
您需要编写自己的过滤器，首先按名称，然后按描述对数组进行排序。请参阅docs.angularjs.org/api/ng/filter/filter
检查Angular Bootstrap Dmitri的Typeahead指令，我本想在问题的末尾添加“请不要建议ui Bootstrap的Typeahead”，但我只是忘记了（我现在就解决这个问题）。我这里的例子实际上从我的实际项目中大大简化了；ui引导的typeahead无法容纳我需要的其他一些自定义功能。您最终找到解决方案了吗？这是一个简单的角度任务，我会给你一个指示，但不完全是这样。我采用了一种不同的方法，使用-你猜对了-UI引导。它确实是有限的，但我生活在它的局限性中，并使用自定义结果模板。谢谢。检查Angular Bootstrap Dmitri的Typeahead指令，我想在问题的末尾加上“请不要建议ui Bootstrap的Typeahead”，但我只是忘记了（我现在就解决这个问题）。我这里的例子实际上从我的实际项目中大大简化了；ui引导的typeahead无法容纳我需要的其他一些自定义功能。您最终找到解决方案了吗？这是一个简单的角度任务，我会给你一个指示，但不完全是这样。我采取了不同的方法，使用?