Question

这是一个非常容易的问题，但是我似乎无法弄清楚（是的，我已经阅读了文档）。

我试图让输入的用户在按搜索并放入const / let后放入ion-searchbar （在Ionic v4中）。

Mah HTML

<ion-searchbar showCancelButton="focus" class=""></ion-searchbar>

我不知道该怎么写TS。

预先感谢： {）

Answer 1

使用（搜索）事件来调用您的函数。当用户单击ion-searchbar提供的搜索按钮时，将触发此事件。
要获取在搜索栏中输入的值，请使用 $ event.target.value ，它获取标记的value字段，在这种情况下为'<ion-searchbar>'

'<ion-searchbar showCancelButton searchIcon="search" animated cancel-button-icon (ionCancel)="hideSearch()" (search)="yourSearchFunction($event.target.value)" placeholder="Search Some Values" ></ion-searchbar>'

Answer 2

HTML文件希望这行得通..

const mongo = require('mongodb').MongoClient;
const client = require('socket.io').listen(4000).sockets;
const dbName = 'chats'; //Database collection

// Connect to mongo
mongo.connect('mongodb://127.0.0.1/mongochat', function(err, client) {
      if (err) {
        throw err;
      }

      console.log('MongoDB connected...');

      // Connect to Socket.io
      client.on('connection', function(socket) {
      let chat = client.db(dbName);

ts文件

<ion-toolbar>
    <ion-searchbar debounce="1000" (ionChange)="ionChange($event)"></ion-searchbar>
  </ion-toolbar>

Answer 3

请始终阅读Api，插件或任何您正在寻找的文档。您将使用 ionChange（）**或** ionInput（）获得数据。在HTML文件中使用以下代码

<ion-searchbar showCancelButton="focus"  ionInput="getData()" class=""></ion-searchbar>

和

public getData(){ //ur logic here }

在类型脚本中。

Answer 4

.html文件

<ion-searchbar [(ngModel)]="autocomplete.input" (ionInput)="updateSearchResults()" placeholder="Search for a place">
</ion-searchbar>

.ts文件

export class LoginPage{

  autocomplete: { input: string; }; 

  updateSearchResults() {
   console.log(this.autocomplete.input)    //search input will display
        }
   }

希望！！这可行。...

Answer 5

使用@ViewChild指令获取对搜索栏的引用：

查看： <ion-searchbar #search></ion-searchbar>

组件： @ViewChild('search', {static: false}) search: IonSearchbar;

此后，按如下所示获得ion-searchbar的值：

const input = await this.search.getInputElement(); const searchValue = input.value;

如何从ion-searchbar获取输入？

5 个答案: