-3

I have JQuery autocomplete dropdown inside the bootstrap dialog in Angular JS application.

I can able to select the items in the dropdown, But can't able to search the items.

What is the Issue and how to solve this?

"It Is Working fine outside the bootstrap modal"

enter image description here.

Carsten Løvbo Andersen
  • 26,637
  • 10
  • 47
  • 77
Muttu B C
  • 37
  • 5
  • 4
    It's very hard to help you solve the problem if we only have an Image, Please post all relevant code. – Carsten Løvbo Andersen Apr 25 '18 at 07:55
  • Possible duplicate of [Select2 doesn't work when embedded in a bootstrap modal](https://stackoverflow.com/questions/18487056/select2-doesnt-work-when-embedded-in-a-bootstrap-modal) – Dani Apr 25 '18 at 07:58
  • can you reproduce it on a plnkr your post isnt very helpfull – Panos K Apr 25 '18 at 08:04

1 Answers1

0

I assume you are displaying items inside a dropdown using ng-repeat. If So, you can simply use Angular built-in filter. This is how it can look like, but I can't include that in your code, because you didn't provide it.

<div class="dropdown-options">
    <div class="filter-input-container">
        <input type="text" ng-model="searchText" class="filter" />
        <i class="fa fa-search"></i>
    </div>
    <div class="option-container" ng-repeat="option in listOptions | filter:searchText">
        <span>{{option.value}}</span>
    </div>
</div>

With this code Angular will filter options insdie listOption by a keyword you will type in input box. You have to bind your input element to a ng-model which is in this case searchText (name could be whatever you want) and then you have to tell the filter what variable to use for filtering filter:searchText

JSEvgeny
  • 2,550
  • 1
  • 24
  • 38