我們要使用到的是在確定搜索時(shí)去觸發(fā)真正的內(nèi)容搜索，所以我們?yōu)?code>search組件增加這一事件的綁定如下

接著，我們?cè)谒阉魇录捻憫?yīng)實(shí)現(xiàn)中打印綁定在搜索組件上的值變量，然后進(jìn)行輸入測(cè)試。

handleSearch() {
    const { searchValue } = this.data
    console.log('搜索內(nèi)容', searchValue)
}

這里需要注意，在開(kāi)發(fā)者工具中，對(duì)于輸入框這類(lèi)組件，由于是在電腦端，所以無(wú)法喚起類(lèi)似手機(jī)端的輸入法界面，所以交互上與手機(jī)中使用小程序的真實(shí)情況所有差別。

對(duì)于這種情況，我們可以使用預(yù)覽功能在手機(jī)端進(jìn)行調(diào)試，手機(jī)端打開(kāi)小程序后可點(diǎn)擊右上角的...調(diào)出調(diào)試面板來(lái)查看控制臺(tái)的輸出。

或者使用開(kāi)發(fā)者工具提供的真機(jī)調(diào)試功能，可以在手機(jī)預(yù)覽小程序的同時(shí)，在電腦端的開(kāi)發(fā)者工具內(nèi)實(shí)時(shí)看到調(diào)試信息。

調(diào)試

經(jīng)過(guò)調(diào)試，我們發(fā)現(xiàn)，search所綁定的value只會(huì)在第一次輸入后改變并存儲(chǔ)在searchValue中，而后續(xù)再輸入的值并不會(huì)更新這個(gè)變量，這就導(dǎo)致我們不能每次搜索都使用最新輸入的內(nèi)容，這是存在問(wèn)題的。

數(shù)據(jù)綁定

解決的方法也很簡(jiǎn)單，就是使用小程序自帶的數(shù)據(jù)綁定特性，將search組件中傳入的value屬性改為model:value，從而啟用數(shù)據(jù)雙向綁定。

這樣，在后續(xù)的輸入更新后，都會(huì)同時(shí)更新searchValue的值，達(dá)到同步修改的效果。

條件查詢(xún)

那么能夠拿到每次搜索框輸入的內(nèi)容，我們就可以拿這個(gè)作為關(guān)鍵字，對(duì)列表內(nèi)容進(jìn)行查詢(xún)。

規(guī)則就是從數(shù)據(jù)庫(kù)中的所有記錄中查找text中包含我們的搜索關(guān)鍵字的記錄，當(dāng)然最多也只會(huì)一次返回20條記錄，然后同樣可以支持上拉加載。

其實(shí)這里和之前查詢(xún)數(shù)據(jù)的方式基本一致，只是在原有的基礎(chǔ)上增加一個(gè)關(guān)鍵字匹配條件，那么讓我們來(lái)改造一下之前的數(shù)據(jù)查詢(xún)方法。

我們將原本用于刷新整個(gè)列表內(nèi)容的方法增加了搜索內(nèi)容作為參數(shù)，并透?jìng)鹘o用于真正查詢(xún)數(shù)據(jù)的云函數(shù)處理方法。同時(shí)，在每次搜索框確認(rèn)搜索時(shí)，判斷是否有搜索內(nèi)容，如果有則去進(jìn)行數(shù)據(jù)的重新獲取。

數(shù)據(jù)庫(kù)記錄匹配

接著，我們?cè)谠坪瘮?shù)中對(duì)于數(shù)據(jù)庫(kù)數(shù)據(jù)的提取也需做相應(yīng)的改動(dòng)，這里會(huì)用到數(shù)據(jù)庫(kù)記錄的正則匹配 stellt einige Serien über dieses Komponentenereignis vor Bindungsmethode.

us Was wir verwenden müssen, ist, die Suche nach echtem Inhalt auszul?sen, wenn die Suche festgelegt ist. Daher fügen wir die Bindung dieses Ereignisses wie folgt zur Komponente search hinzu

Als n?chstes drucken wir die Bindung in der Suche in der Antwort aus Implementierung der Suchereigniswertvariablen auf der Komponente und anschlie?ende Eingabetests.

const db = cloud.database()
const collection = db.collection('homeContentList')

let searchPromise
let countPromise

try {
  if (content) {
    const searchReg = db.RegExp({
      regexp: content,
      options: 'i'
    })
    searchPromise = collection.where({
      text: searchReg
    })
    .skip(pageNo).limit(pageSize).get()
    countPromise = collection.where({
      text: searchReg
    })
    .count()
  } else {
    searchPromise = collection.skip(pageNo).limit(pageSize).get()
    countPromise = collection.count()
  }
  const [{ data: listData }, { total }] = await Promise.all([searchPromise, countPromise])
  if (listData) {
    data = listData
  }
  totalSize = total
} catch (error) {
  console.log('error', error)
}

Hier ist zu beachten, dass in den Entwicklertools Komponenten wie Eingabefelder, da sie sich auf der Computerseite befinden, keine Eingabemethodenschnittstelle ?hnlich der Mobiltelefonseite hervorrufen k?nnen, sodass die Interaktion v?llig anders ist die tats?chliche Situation der Nutzung von Miniprogrammen auf Mobiltelefonen.

In diesem Fall k?nnen wir die Vorschaufunktion zum Debuggen auf dem Mobiltelefon verwenden. Nachdem Sie das Miniprogramm auf dem Mobiltelefon ge?ffnet haben, k?nnen Sie auf ... in der oberen rechten Ecke klicken, um es aufzurufen das Debugging-Panel, um die Ausgabe der Konsole anzuzeigen.

Debugging??????Nach dem Debuggen haben wir festgestellt, dass der an search gebundene value nur beim ersten Mal verwendet wird Zeit Nach der Eingabe wird es ge?ndert und in searchValue gespeichert, und der anschlie?end eingegebene Wert aktualisiert diese Variable nicht. Dies bedeutet, dass wir nicht für jede Suche den neuesten Eingabeinhalt verwenden k?nnen, was ein Problem darstellt. ??

??Datenbindung??????Die L?sung ist auch sehr einfach: Verwenden Sie die mit dem Miniprogramm gelieferte Datenbindungsfunktion und fügen Sie sie zur Suche< hinzu /code>-Komponente Das übergebene Attribut <code>value wird in model:value ge?ndert, wodurch eine bidirektionale Datenbindung erm?glicht wird. ????Auf diese Weise wird nach nachfolgenden Eingabeaktualisierungen gleichzeitig der Wert von searchValue aktualisiert, um den Effekt einer synchronen ?nderung zu erzielen. ??????

Bedingte Abfrage???? Dann k?nnen wir den Inhalt jedes Mal in das Suchfeld eingeben und ihn als Schlüsselwort verwenden, um den Listeninhalt abzufragen. ????Die Regel besteht darin, die Datens?tze, die unsere Suchbegriffe enthalten, in allen Datens?tzen in der Datenbank zu finden. Natürlich werden jeweils nur 20 Datens?tze zurückgegeben, und das Laden per Pull-up ist ebenfalls m?glich unterstützt. ????Tats?chlich ist die Methode hier im Grunde dieselbe wie die vorherige Methode zum Abfragen von Daten. Sie fügt lediglich eine Schlüsselwortübereinstimmungsbedingung auf der ursprünglichen Basis hinzu. Lassen Sie uns also die vorherige Datenabfragemethode umwandeln. ????????uns Die ursprünglich zum Aktualisieren des gesamten Listeninhalts verwendete Methode fügt den Suchinhalt als Parameter hinzu und übergibt ihn transparent an die Cloud-Funktionsverarbeitungsmethode, mit der die Daten tats?chlich abgefragt werden. Gleichzeitig wird jedes Mal, wenn das Suchfeld die Suche best?tigt, beurteilt, ob Suchinhalt vorhanden ist, und wenn ja, werden die Daten erneut erfasst. ??

??Datenbankdatensatzabgleich??????Als n?chstes müssen wir auch entsprechende ?nderungen an der Datenbankdatenextraktion in der Cloud-Funktion vornehmen. Die -Regelm??igkeit des Datenbankdatensatzes wird sein Hier wird die Match-Methode verwendet, um den Suchinhalt abzugleichen. Weitere Informationen finden Sie im ??????Die Kernlogik nach der Transformation lautet wie folgt:

<view class="wrap">
  <text class="text">{{text}}</text>
</view>

??Wir unterscheiden, ob sie w?hrend durchgeführt werden soll Der Prozess des Abfragens von Daten danach, ob Suchinhalte vorhanden sind. Wenn Suchinhalte vorhanden sind, ignorieren Sie die Gro?- und Kleinschreibung des Suchinhalts, um so viele Inhalte wie m?glich abzugleichen. ??????Suchergebnisse????????????Auf diese Weise k?nnen wir den Suchinhalt abfragen. ??

內(nèi)容頁(yè)面優(yōu)化

最后，我們優(yōu)化一下首頁(yè)的展示效果。

無(wú)數(shù)據(jù)組件

很多頁(yè)面都有可能是數(shù)據(jù)列表的形式，而其各自在加載完所有數(shù)據(jù)后需要展示在底部的“沒(méi)有更多內(nèi)容”字樣可能不同，所以我們將這部分展示封裝成一個(gè)可供復(fù)用的自定義組件。

試圖部分

<view class="wrap">
  <text class="text">{{text}}</text>
</view>

組件樣式

.wrap {
  width: 100%;
  padding: 20rpx 0 40rpx;
  text-align: center;
}
.text {
  color: #999;
  font-size: 26rpx;
  line-height: 30rpx;
}

組件參數(shù)

Component({
  properties: {
    text: {
      type: String,
      value: '沒(méi)有更多內(nèi)容了'
    }
  }
})

展示效果

總結(jié)

這篇，我們實(shí)現(xiàn)了搜索框功能，將搜索框中輸入的內(nèi)容作為搜索關(guān)鍵字，從而在數(shù)據(jù)庫(kù)中查找包含關(guān)鍵字的記錄進(jìn)行展示。另外，我們還將“沒(méi)有更多內(nèi)容”封裝可供復(fù)用的組件。

更多編程相關(guān)知識(shí)，請(qǐng)?jiān)L問(wèn)：編程入門(mén)?。?/p>

Das obige ist der detaillierte Inhalt vonBringen Sie Ihnen Schritt für Schritt bei, wie Sie die Inhaltssuchfunktion in einem Miniprogramm implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!