Custom filterable dropdown menu using AngularJS

Question

What I am trying to do: A custom filterable dropdown menu. The list item gets dropdown on-focus on input element . The options are selectable and it's text should appear in input field when clicked. The list view should go away when input not focused.

Problem: The list item click event couldn't be triggered as list view gets removed on blur( on-blur="bool=hide").

Demo:http://jsfiddle.net/Dreamerpro/3s5c62Lx/2/

PS: I can solve using jquery but since I am learning Angular so I want to do it in angular way and sorry for my English :P

PrinceG · Accepted Answer · 2015-12-19 09:01:54Z

1

You can try this.

instead of assigning bool = false on blur. you can do this inside setModel() function.

see http://jsfiddle.net/rzs9osob/

EDIT: Replaced ng-click with ng-mousedown and retained ng-blur handler. Updated fiddle: http://jsfiddle.net/g9p4dpdd/

edited Dec 19, 2015 at 9:01

answered Dec 19, 2015 at 8:13

PrinceG

1,0827 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

The_ehT Over a year ago

Thanks :D. That was too easy.

The_ehT Over a year ago

Can you please provide solution for what @Will has said.

PrinceG Over a year ago

You can try ng-mousedown and retain ng-blur handler. see updated fiddle. jsfiddle.net/g9p4dpdd @Will, nice catch. I didn't see that.

Will · Accepted Answer · 2015-12-19 08:19:23Z

0

@Prince, I can't leave a comment in your answer, but your jsfiddle works except I would still leave the ng-blur="bool = false" in so the drop down goes away when the user clicks somewhere else.

answered Dec 19, 2015 at 8:19

Will

1,7783 gold badges17 silver badges23 bronze badges

1 Comment

The_ehT Over a year ago

yeah. I actualy forgot to say that

Nikhil Varma · Accepted Answer · 2015-12-19 08:31:51Z

0

Slight modification to the code will get you your result.

Working Fiddle

Explanation: You are using bool = false in your onblur attribute. Instead use that in your method which is used to set the value. This way, the list will be available even after loosing focus from the input field.

Hope this helps

edited Dec 19, 2015 at 8:31

answered Dec 19, 2015 at 8:25

Nikhil Varma

846 bronze badges

1 Comment

The_ehT Over a year ago

Yes, thanks for reply, but I need to hide the list-item on blur and if clicked then set the input value to the clicked item text.

Collectives™ on Stack Overflow

Custom filterable dropdown menu using AngularJS

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related