gabriel
gabriel

Reputation: 345

Using autocomplete in angular.js

I'm building an app, which uses an autocomplete. It should be something like jQuery UI autocomplete, so if a user starts typing, it recommends him options. The thing is, that I have two kinds of data, I'm searching in. Actually, there are 'tasks' and 'projects'.

Every task has some params: task-id, task-name-display, task-name-search, project-id. Every project has: project-id, project-name-display, project-name-search, client-id, client-name.

The app should search in every of these params, but it should display only some of them. For example, if the data is:

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

And I type: 47, in dropdown I should see:

'#47 Task name Example Project A'

Again, the point of this is to make an autocomplete using angular.js, where I search in a little bit different data than I display. Is there a way how to do this simply in pure angular.js?

Is there a way how to do this also using jQuery UI autocomplete + angular.js?

Thanks.

Upvotes: 2

Views: 13365

Answers (2)

Abilash
Abilash

Reputation: 6089

I suppose you can use ui-autocomplete to do what you want to do.

Here is the link to ui-autocomplete

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

Make sure you have jQuery, jQuery UI and AngularJS in your project to make this work.

Cheers!

Upvotes: 1

m.bemowski
m.bemowski

Reputation: 632

Have tought about using Select2 library? It should meet your needs, as it is very flexible: you can define your own search logic and also display data in different way during search and when the item is selected in the component.

It works flawlessly with AngularJs thanks to AngularUI library. You can use data stored in your model or fetch it using AJAX.

Upvotes: 0

Related Questions