Searchable, scrollable bootstrap dropdown with angularjs

Posted by Kyriakos Chatzidimitriou on 2014-10-23

---

So you are working in AngularJS, you are using the Bootstrap framework and the requirement is to create a dropdown button, which will include several (list) items and that a) is scrollable and b) is searchable because the menu items are many.

The following code presents a solution to the above problem.

We created a dropdown button with menu items coming from the angular controller. At the top of the menu an input element is added as a list item and bound to the scope variable query. This will act as the filter in the ng-repeat directive. The problem is that at this point clicking inside the input element will instantly close the dropdown since the event is propagated up the DOM tree. Thus the jQuery stopPropagation method is used for stopping the event from bubbling up.

---

comments powered by Disqus