Я хотел бы разрешить пользователю вводить или выбирать раскрывающийся список bootstrap. Если пользователь вводит текст и теряет фокус на элемент ввода (событие размытия триггера), он ищет описание списка национальностей и использует jquery для обновления текста ввода. например, country1 -> Country1
Теперь, когда я набираю country1
и запускаю событие размытия, оно конвертируется в Country1
, но затем снова конвертируется в country1
. Любой способ предотвратить это?
Вот мой angular код.
Компонент
// Data
userdata={nationality:undefined};
countryData=[{id:0, description:"Country0"}, {id:1, description:"Country1"}, {id:2, description:"Country2"}];
// Bootstrap typeahead
searchCountry = (text$: Observable<string>) =>
text$
.debounceTime(200)
.distinctUntilChanged()
.map(term => term.length < 2 ? []
: this.countryData.filter(nationality => nationality.description.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 15));
nationalityFormatter = (nationality) => nationality.description;
// Blur event
$onBlur() {
let domElement = $('#my_company_country_description');
if (domElement) {
this.userdata.nationality = this.getCountry(domElement, this.countryData);
}
}
// Check the input text (case insensitive)
getCountry(company_country: JQuery<HTMLElement>, countries: any[]) {
for (let i = 0; i < countries.length; i++) {
let str: any = company_country.val();
if (str && countries[i].description.toLowerCase() === str.toLowerCase()) {
return JSON.parse(JSON.stringify(countries[i]));
}
}
company_country.val("");
return undefined;
}
HTML
<input id="my_company_country_description" (blur)="$onBlur()" type="text" class="form-control "
[(ngModel)]="userdata.nationality" [ngbTypeahead]="searchCountry" name="nationality" #nationality="ngModel"
[inputFormatter]="nationalityFormatter" [resultFormatter]="nationalityFormatter" [editable]='false'
placeholder="" required />