Rakeschand Rakeschand - 4 months ago 23
AngularJS Question

How to add a wildcard in auto-complete which is not present in auto-complete items

I am using md-contact-chips from angular material. I need to add some option in contact-chips which are not present in items of the contact-chips.

This same feature is implemented by naukri.com in there employer's login advance search fields.

If Somebody knows about this in AngularJS then please answer.

Here are few links of md-contact-chips, I am using the same type-

contact chips with example

contact chips documentation

Answer

I have figured out the solution of the question-
Here it goes if it helps anybody:-

md-contact-chips is basically auto-complete in md-chips, so I allowed to chip the items which are not presents in items of auto-complete.

Code:-

<md-chips flex 
    ng-model="vm.SkillCertification" 
    md-autocomplete-snap="" 
    md-transform-chip="vm.transformChip($chip)" 
    md-require-match="vm.autocompleteDemoRequireMatch">
          <md-autocomplete 
              md-selected-item="vm.selectedItem" 
              md-search-text="vm.searchText" 
              md-items="item in vm.querySearch(vm.searchText)" 
              md-item-text="item.name" 
              placeholder="Skill & Certification">
            <span md-highlight-text="vm.searchText">{{item.name}}</span>
          </md-autocomplete>
          <md-chip-template>
            <span>
                            <strong>{{$chip.name}}</strong>
                        </span>
          </md-chip-template>
        </md-chips>

Adding chips which are not in items JS Code:-

function transformChip(chip) {
          // If it is an object, it's already a known chip
            if (angular.isObject(chip)) {
                return chip;
            }
            // Otherwise, create a new one
            return { name: chip};
        }