Search code examples
angularjsbootstrap-typeahead

Bootstrap typeahead displays values


I am working on an Angular application that uses uses bootstrap typeahead on a text box. When I click inside the textbox, all the values are displayed in a dropdown. I have over 1000 items to search through and there is a delay from when the users clicks inside the textbox and when they are able to type. How can I disable the values from popping up once the textbox is clicked? Here is my HTML code

<input id="filterValue1"
    class="form-control input-sm" type="text"
    ng-model="modalCriteria.filterValue1"
    uib-typeahead="option.value as (option.valueDescription) for option in valueSetOptions | filter:$viewValue | limitTo:1500"
    placeholder="Select a value" 
    typeahead-min-length="0"
    typeahead-editable="true"
>

Solution

  • If you want to wait until they actually start to enter a text value, and not just open it when they click on it, you can change the typeahead-min-length.

    By default it is '1', which means it will only start looking for matches when '1' character has been entered into the input. So in this case, removing it completely will work for you.

    <input id="filterValue1"
        class="form-control input-sm" type="text"
        ng-model="modalCriteria.filterValue1"
        uib-typeahead="option.value as (option.valueDescription) for option in valueSetOptions | filter:$viewValue | limitTo:1500"
        placeholder="Select a value"
        typeahead-editable="true">
    

    Also, setting it to typeahead-min-length="2" will restrict it even more, since it will only start matching on 2 characters, dramatically filtering out a large dataset.