angularjs custom filter in drop-down list

Question

I have ul li element, where is written users list. and I have one input, where users can write and filter users list. and this ul element is hidden by default. after focus on input I'm showing this ul element and on blur I'm hiding this ul.

<input type="text" autocomplete="off" ng-model="checkData[key]" />

<ul>
    <li ng-repeat="user in users | identification:checkData[key]">{{user}}</li>
</ul>

And my filter:

return (items: Array<string|number>, value: string|number) =>
{
    if(typeof items !== 'undefined')
    {
        var filtered: Array<string|number> = [];

        for(var i: number = 0, length: number = items.length; i < length; i++)
        {
            var element: string|number = items[i];

            if((((element + '').indexOf(value + '') === 0) && element !== value) || typeof value === 'undefined')
            {
                filtered.push(element);
            }
        }
        return filtered;
    }
}

This works excelent, but I've one issue. When user enters some value in input, user list in ul element will be filtered.

so when user will focus again on input, in ul shows filtered data. I want to on every focus, show full list and don't delete input value.

How can Achieve this?

Answer 1

You can just disable the filter on focus by passing in an argument to the filter method, in this way:

<ul>
    <li ng-repeat="user in users | identification:checkData[key]:isEnabled" ng-focus="isEnabled = false;">{{user}}</li>
</ul>

Modify your filter:

return (items: Array<string|number>, value: string|number, isEnabled: boolean) =>
{
    if (!isEnabled) {
        return items;  // Return the unfiltered list ...
    }
    if(typeof items !== 'undefined')
    {
        var filtered: Array<string|number> = [];

        for(var i: number = 0, length: number = items.length; i < length; i++)
        {
            var element: string|number = items[i];

            if((((element + '').indexOf(value + '') === 0) && element !== value) || typeof value === 'undefined')
            {
                filtered.push(element);
            }
        }
        return filtered;
    }
}

Answer 2

This will do the trick. Try this one.

<input type="text" autocomplete="off" ng-model="checkData[key]" ng-focus="filterKey[key] = ''" ng-blur="filterKey[key] = checkData[key]"/>
<!-- hidden field to save search text -->
<input type="hidden" ng-model="filterKey[key]"/>
<ul>
    <li ng-repeat="user in users | identification:filterKey[key]">{{user}}</li>
</ul>