如何抖在NativeScript角搜索栏？

Question

我想抖搜索输入：

export class SearchComponent implements OnInit {

    onTextChanged(args) {
        let searchBar = <SearchBar>args.object;

        if (searchBar.text) {
            this.updateResults(searchBar.text);
        } else {
            this.results = new ObservableArray();
        }
    }

    updateResults(q) {
        // hit api
    }
}


<SearchBar (textChange)="onTextChanged($event)"></SearchBar>

由于是后端将在每个按键被击中。

Answer 1

使用FromControl和debounceTime订阅添加valueChanges操作。确保导入的ReactiveFormsModule了。

HTML

<SearchBar [formControl]="searchControl" class="input"></SearchBar>

TS

this.subscription = this.searchControl.valueChanges
        .pipe(debounceTime(500))
        .subscribe((value) => {
            console.log(value);
        });

Playground Sample

Answer 2

试试这个搜索栏在nativescript。

HTML： -

<SearchBar class="form-input search-barHead" [text]="searchPhrase" 
(loaded)="searchBarLoaded($event)"
  textFieldHintColor="#ffffff" textFieldBackgroundColor="#02637E" height="40" 
  hint="Search TCP" (clear)="onAllSearchClear($event)" (submit)="onAllSearchSubmit($event)"> 

打字稿： -

Public searchPhrase:any;

public searchBarLoaded(args) {
    let searchBar = <SearchBar>args.object;
    if (searchBar.android) {
        searchBar.android.clearFocus();
    }
}

public onAllSearchClear(args) {
    let searchBar = <SearchBar>args.object;
    let searchProduct = searchBar.text;
}

public onAllSearchSubmit(args) {
    let searchBar = <SearchBar>args.object;
    let searchProduct = searchBar.text;
}