Question

我想在网站http://www.jobs.cz/

上制作与“搜索”非常相似的内容

它应该做什么：

选择框显示用户关注输入
用户可以输入选择框中的输入和过滤结果
如果用户选择结果选择框之一隐藏
如果用户再次关注输入选择框再次打开，用户可以选择另一个选项（选择添加到之前不重写前一个选项）
如果他开始输入输入，无论已经选择什么，它仍然会过滤（示例：他已经选择了“Administrativa”但是如果他输入Auto，它会向他提供“Auto - Moto”，换句话说，之前选择的值不应该用于过滤器）
每个挑选的值应该处于某种“标记”模式（每个模式都是分隔的内联块并且有类）

在我继续之前，我不希望你为我制作完整的代码，这将花费很长时间，而且我没有来这里代码，但主要是为了如何设计这样的东西。我开始自己有很多事情，只是不知道我是否正确，我需要帮助一些想法如何做到这一点。

所以我做了什么：

打开/关闭选择框div：

输入看起来像：

<input id="position" placeholder="Position" ng-focus="focus=true" ng-blur="focus=false" ng-model="q">

然后像

<div class="inputHelper" ng-show="focus">

过滤结果：

基于ng-repeat中的角度documentation过滤器，应该通过以下方式轻松完成：

<li ng-repeat="pos in listCtrl.positions | filter:q as results" ng-click="listCtrl.choosePosition(pos)">{{pos.name}}</li>

ng-model="q"上有<input>，但是如果我将某些内容推送到该模型，就像之前的用户选择一样，问题就会出现。如果用户已经选择了某些内容，我不知道如何处理过滤器。

处理多个选择

为此，我创建了一个数组，我总是检查用户是否已经选择了该数组，如果没有将其推送到数组。

choosePosition: function(position) {
    if (listCtrl.chosenPosition.indexOf(position) === -1) {
        listCtrl.chosenPosition.push(position);
    }
}

在输入中显示对象数组

我在文档中搜索了很多这个并且google这个问题，我发现this输入中的基本显示数组是什么。我没有找到更有用的东西。所以对于这一点，我不知道如何显示对象数组，以及如何将每个数组元素设置为内联块并为其提供一些类。

要点：

这是一篇很长的帖子，但是我试着说出我需要做的一切，以避免一些错过的理解，我在这里度过了几天我仍然卡在某处。而且我甚至不确定我是否设计得这么好。如果有人可以帮助我使用部分代码可以工作或者至少试图解释我如何做这样的事情我将非常感激

Answer 1

如果您的项目允许使用，Angular Material's Autocomplete几乎可以直接实现您的目标。

如何使用结果

1 个答案: