简体   繁体   中英

I am using angular 2 and i want to fetch restaurant name from drop down when i start entering 2 characters

I am using Angular 2 and I want to fetch all the restaurants name from drop down I have resulted in the drop down when I clicked on the text filed it populated all the result but I want the result when I entered 2 character

So on the basis of the City, I am fetching restaurant and I want to result populated after I will enter some character

<form (ngSubmit)="AddUpdateExperience(selectedExperience);experienceForm.reset();selectedExperience.restaurantType='';selectedExperience.workProfile='';selectedExperience.restaurantName=''" #experienceForm="ngForm">
  <div class="form-group">
    <div class="col-sm-6">
      <input type="text" class="form-control input-responsive" [(ngModel)]="selectedExperience.city" [ngModelOptions]="{standalone: true}" options="{types: ['address'], componentRestrictions: { country: 'US' }}" (setAddress)="getAddressForExperience($event)"
        (city)='city=$event' (postal_code)='postal_code=$event' id="autocomplete" placeholder="City you work in*" required ng2-google-place-autocomplete />

    </div>

  </div>
  <div class="form-group">
    <div class="col-sm-12">
      <input type="text" class="form-control input-responsive" ngui-auto-complete [(ngModel)]="selectedExperience.restaurantName" #myserver [source]="restaurants" name="restaurantName" #restaurantName="ngModel" [list-formatter]="autocompleListFormatter" value-property-name="name"
        display-property-name="name" placeholder="Restaurant/Bar Name*" (blur)="update(myserver.value)" loading-text="Loading" required>


    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-12">
      <input type="submit" [disabled]="!experienceForm.form.valid " value="{{experienceButtonText}}" class="btn btn-success" />
    </div>
  </div>
</form>

Something like this.

In your html:

<input (input)="inputRestaurant($event.target.value)" />

In your component:

private inputRestaurant(_value: string){
  if(_value.length > 2){
     // do something
  }
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM