This is of course is not a invention, but thought of writing this post as it might help some one, some day.
The thing I am trying to achieve is some thing like below (please ignore the styling!).
Basically it’s just a textbox giving us suggestions from predefined list of items. The important thing hers is the textbox can have multiple entries and for each item it’s giving us suggestions. So let’s see how we can build something like this using AngularJS and jQuery.
Here I will be using a Visual Studio solution, and if you want to learn how you can create an ASP.NET Project Powered by AngularJS using Visual Studio, please refer the below article.
First I need to install jQuery-UI nuget package and include the references.
Once the reference to jQuery and jQuery UI libraries are added, let’s write some code in the AngularJS controller to define the list of suggestions and write a method to invoke jQuery autocomplete on a textbox.
Basically you can find this code snippet in jQuery UI site and I just modified it for AngularJS. Now in the view/template, let’s just create an textbox and put it’s id as “txtTags” and kick off our “autoComplete” method in key up event.
So that’s about it. If you want the full sample code, you can download it from my OneDrive.