在输入数据之前，是否不使用angular-ui-select显示下拉选项？

Question

我使用angular-ui-select指令来创建一个自动完成的输入域。我希望能够在不出现下拉选项的情况下单击并聚焦字段。文档中的柱塞示例是这样工作的，但我无法让我的示例正确运行。请帮帮忙。

下面是我的代码：

<ui-select ng-model="customer.selected" theme="bootstrap">
    <ui-select-match placeholder="Start typing..">{{ $select.selected.family_name }}</ui-select-match>
    <ui-select-choices repeat="customer in customers | filter: $select.search">
        <div ng-bind-html="trustAsHtml((customer.family_name | highlight: $select.search))"></div>
    </ui-select-choices>
</ui-select>

这里是他们的柱塞示例，它正在以我想要的方式工作。

http://plnkr.co/edit/a3KlK8dKH3wwiiksDSn2?p=preview

Answer 1

我也有同样的问题。我希望能够在不出现下拉选项的情况下单击并聚焦字段。

在这里，我将分享我的解决方案。也许这会对某些人有所帮助。我在@Corey Quillen共享的plunker中对Selectize theme示例进行了更改。我已经清理了其他东西，所以这会有帮助的。

1)首先，我在ui-select指令中添加了reset-search-input="false"。因此，它不会重置搜索输入。

2)然后我用自定义过滤器propsFilter替换了filter。它已经在Select2 theme中使用了。并放入

if(!props.name.length){ return out; }

在If condition上方的过滤器中。在demo.js文件中。

因此，如果没有输入搜索文本，数据将返回空。

这是它的柱塞example。

Answer 2

默认情况下，ui-select会显示一个下拉列表，我认为我们无法更改它。但是您可以更改它的绑定数据。在柱塞器示例中，ui-select被绑定到最初为空的模型‘example s.selected’，因此没有弹出任何内容。但是，一旦开始键入，刷新将调用函数refreshAddress()将结果填充到address中。填充结果后，ui-select会发现其模型(地址)包含数据，并开始显示一个下拉列表。在你搜索了一些东西之后，试着点击文本框，它仍然会显示结果，因为它们仍然存在于模型中。

因为，我想您是用一个局部变量来尝试它的，所以它预先填充了ui-select的数据，因此它显示了它。我认为您应该尝试在代码中发出请求以获取数据，并使用刷新和刷新延迟。如果你没有web服务并且想要使用本地数据，我建议你将select绑定到一个空的模型中，并使用一个自定义函数来刷新，你可能需要在刷新函数中编写一个自定义搜索功能，但是你可以使用javascript的search()或indexOf()来实现。