add new item to typeahead if it's not on the list

Problem

I'm using angular bootstrap typeahead. I would like to make an enhancement where if the item is not in the list, the user has the ability to add a new item (maybe the item being typed shows up at the bottom of the list with a plus button, or something similar).

Is there an easy way to make this enhancement? If not, is there something else that can do this?

Problem courtesy of: Jason

Solution

Not sure if this is what you're looking for, but you can sort of do this using the $viewValue variable that's available that holds the current value in the input box. You can append it to the typeahead results. If it's selected, add it to the results for future use...

var states = ['Alabama', 'Alaska' /* , ... */];
$scope.getStates = function(current) {
    var statesCopy = states.slice(0);
    if (current) {
        statesCopy.unshift(current);
    }
    return statesCopy;
};
$scope.onSelect = function (item) {
    states.push(item);
};

<input type="text" ng-model="selected" 
typeahead="state for state in getStates($viewValue) | filter:$viewValue | limitTo:8" class="form-control"
typeahead-on-select="onSelect($item)">

Live Demo

Note that you'll have to do a bit more work to deal with duplicates or live data sources.

Solution courtesy of: Anthony Chu

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.