Question

我正在使用angular-ui-select指令来创建自动完成输入字段。我希望能够在没有显示下拉选项的情况下单击并聚焦该字段。文档中的Plunker示例以这种方式工作，但我不能让我的行为正确。请帮忙。

这是我的代码：

<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>

这是他们的Plunker示例，它按照我希望的方式工作。

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

Answer 1

我有同样的问题。我希望能够在没有显示下拉选项的情况下单击并聚焦该字段。

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

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

2）然后我用自定义过滤器filter替换了propsFilter。哪个已在Select2 theme中使用。并把

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

在If condition上方的过滤器中

。在demo.js文件中。

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

以下是其中的example。

Answer 2

默认情况下，ui-select显示下拉列表，我不认为我们可以改变它。但您可以更改其绑定数据。在plunker示例中，ui-select绑定到模型'address.selected'，它最初为空，因此不会弹出任何内容。但是一旦你开始输入刷新，就会调用函数refreshAddress（）将结果填充到地址中。填充结果后，ui-select会发现其模型（地址）包含数据并开始显示下拉列表。搜索完成后，尝试单击文本框，它仍然会显示结果，因为它们仍然存在于模型中。

因为，你正在尝试使用我认为的局部变量，它预先填充了ui-select的数据，因此它显示了它。我认为您应该尝试在代码中发出请求以获取该数据并使用刷新和刷新延迟。如果您没有Web服务并且想要使用本地数据，我建议将select绑定到空模型并使用自定义函数将数据放入其中以进行刷新，您可能必须在刷新函数中编写自定义搜索功能，但你可以使用javascript的search（）或indexOf（）。

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

2 个答案: