在angular.js中使用自动完成功能

时间:2013-12-17 13:26:50

标签: angularjs autocomplete

我正在构建一个使用自动填充功能的应用。它应该类似于jQuery UI自动完成,所以如果用户开始输入,它会推荐他选项。问题是,我有两种数据,我正在搜索。实际上,有“任务”和“项目”。

每项任务都有一些参数:task-id, task-name-display, task-name-search, project-id。每个项目都有:project-id, project-name-display, project-name-search, client-id, client-name

应用程序应该搜索每个参数,但它应该只显示其中的一些。例如,如果数据是:

task-id: 47
task-name-display: Task name Example
task-name-search: task-name-example
project-id: 57

我输入:47,在下拉列表中我应该看到:

'#47 Task name Example Project A'

同样,这一点是使用angular.js进行自动完成,我搜索的数据与我显示的数据有点不同。有没有办法如何在纯angular.js中做到这一点?

有没有办法如何使用jQuery UI autocomplete + angular.js?

感谢。

2 个答案:

答案 0 :(得分:1)

我想你可以用ui-autocomplete来做你想做的事。

以下是ui-autocomplete

的链接

https://github.com/zensh/ui-autocomplete

确保您的项目中有jQueryjQuery UIAngularJS才能使其发挥作用。

干杯!

答案 1 :(得分:0)

是否考虑过使用Select2库?它应该满足您的需求,因为它非常灵活:您可以定义自己的搜索逻辑,并在搜索期间以及在组件中选择项目时以不同方式显示数据。

感谢AngularUI库,它可以与AngularJs完美配合。您可以使用模型中存储的数据或使用AJAX获取它。