小程式常見的搜尋功能如何實現(xiàn)？以下這篇文章就來一步步帶大家了解一下小程式中實現(xiàn)搜尋功能的方法，希望對大家有幫助！

在每個小程式開發(fā)的過程中，基本上都會配備有搜尋功能，那麼相對智慧化的搜尋功能是如何實現(xiàn)的呢，透過一段時間的學(xué)習(xí)，我已經(jīng)學(xué)會比較全面的搜尋框功能，來一起看看吧！

開發(fā)準(zhǔn)備

• 微信小程式
• 有讚vant 元件庫

效果展示

先來看看效果

#前期準(zhǔn)備

雲(yún)端資料庫導(dǎo)入一些資料用來測試搜尋框功能

實作

在目錄下方新建三個pages

index用來作為搜尋框的第一個頁面

search用來做具體搜尋的頁面

hotsearch是搜尋內(nèi)容的詳情頁面

首先我們先來看看搜尋框第一個頁面index的佈局，這裡主要介紹搜尋框的內(nèi)容，下面的其他內(nèi)容就不在這兒贅述了

這是index.wxml程式碼

      <view class="search_1" bindtap="gotoSearch">
          <van-search 
          placeholder="搜索單品" disabled
          />
        </view>
      <view class="search_2">
        <view class="pic" bindtap="list" >
          <image src=""></image>
        </view>
      </view>
    </view>

這是搜尋框的search.wxml程式碼

  <view class="dewu-search">
    <view class="return" >
      <view class="return_pic" bindtap="gotoindex">
        <image src=""></image>
      </view>
      <view class="txt">搜索</view>
    </view>
  </view>
  <van-search 
      value="{{value}}" 
      show-action 
      placeholder="輸入商品名稱、貨號"
      bind:clear="onClear" 
      bind:search="onSearch"   
      bind:cancel="oncancel" 
      bind:change="onchange"
      bindtap="input"
      value="{{value}}"
    />
    <block wx:if="results.length > 0">
      <van-cell wx:for="{{results}}" wx:key="_id" title="{{item.title}}"  size="large"  />
    </block>
    <view class="page1" hidden="{{issuggest==true?&#39;hidden&#39;:&#39;&#39;}}" >
        <view class="bd">
          <view class="content">熱門搜索</view>
          <view class="box">
            <view class="items">
              <view class="item" wx:for="{{goods}}"
              wx:key="index"  bindtap="hotsearch" data-id="{{item.id}}"
              >
              {{item.hot}}
              </view>
            </view>
          </view>
        </view>
        <view class="last">
          <view class="content">搜索歷史</view>
          <view class="box">
            <view class="items">
              <view class="item" wx:for="{{historyList}}" wx:key="index" data-id="{{item.id}}" bindtap="gotohistoryList"
              wx:key="index">
                {{item.hot}}
              </view>
            </view>
          </view>
        </view>
    </view>
    <view class="page2"   hidden="{{issuggest==false?&#39;hidden&#39;:&#39;&#39;}}">
      <view class="content1">
        <view class="title" wx:for="{{goods1}}" data-id="{{item.id}}"
              wx:key="index"  bindtap="hotsearch" >
              {{item.hot}}
        </view>
      </view>
    </view>
</view>

js裡面首先要引入雲(yún)端資料庫裡的資料

    const db = wx.cloud.database();
    const dewuCollection = db.collection('dewu');

要做到輸入框發(fā)生改變時，彈出相關(guān)的內(nèi)容，則需要兩個page，當(dāng)輸入框有內(nèi)容輸入時，把隱藏的頁面顯示出來hidden="{{ issuggest==false?'hidden':''}}"來判斷是否要出現(xiàn)相關(guān)內(nèi)容頁面， 用indexOf判斷e.detail（輸入框內(nèi)容）是否是在雲(yún)端資料庫裡存在的，如果是存在的，那麼將這條資料存入一個陣列裡面，並且連接之前搜尋後的數(shù)組，再使用 wx.setStorageSync();將輸入框的資料存入storage裡面，然後再wx.getStorageSync()提取資料。

這是當(dāng)輸入框有資料的時候就會彈出詳情頁面，點擊可以跳到商品的詳情頁

這是搜尋框的邏輯

    if(e.detail.length!=0){
        this.setData({
          issuggest:true,
        })
        var arr = [];
        console.log(this.data.goods.length);
            for (var i = 0; i < this.data.goods.length; i++) {
              if (this.data.goods[i].hot.indexOf(e.detail)>=0) {
                arr.push(this.data.goods[i]);
              }
              this.setData({
              goods1:arr,
           })
          }
    }
    else {
      console.log(&#39;succes&#39;);
      this.setData({
         issuggest:false
      })
    }
  },
    async onSearch(e){
    var arr1=new Array();
    var historyList=new Array();
    var storage=new Array();
    for (let i = 0; i < this.data.goods.length; i++){
      if(e.detail==this.data.goods[i].hot){
        arr1.push(this.data.goods[i]);
        console.log(arr1);
        break
      }
      else{
              arr1.push(e.detail);
              console.log(arr1);
        }
    }
    if(arr1.length>1){
      this.setData({
        storage:arr1.slice(arr1.length-1,arr1.length)
      })
    }
    else{
      console.log(arr1,&#39;要存進去的數(shù)據(jù)&#39;);
      this.setData({
        storage:arr1
      })
    }
    if(this.data.historyList !=[]){
      this.data.historyList = this.data.historyList.concat(this.data.storage);//連接
    }
    else{
      this.data.historyList=this.data.storage
    }
   wx.setStorageSync(&#39;historyList&#39;, this.data.historyList);
   this.setData({
    historyList:this.data.historyList
  })
  },

wx.navigateTo#可以用來跳到詳細的頁面，加上字串模板，判斷id的值，用資料來驅(qū)動頁面，跳到相同的頁面不同的資料。

wx.navigateTo({
      url: `../hotsearch/hotsearch?id=`+id
    })

最後也要更新資料

     wx.showLoading({
       title: '數(shù)據(jù)加載中...',
     })   
     setTimeout(()=>{
      wx.hideLoading()
       this.setData({
          goodsNav: nav,
          goodsList:List,
          recommend:List,
          goods2:this.data.historyList
       })
      },1000)
// console.log(goodsList,'===========');
   },

注意不要忘記要在全域json或局部頁面json中引入需要使用的元件的位址

    "usingComponents": {
        "van-search":"./miniprogram_npm/@vant/weapp/search/index"
  },

擴充

這個自動跳到導(dǎo)覽列中間的功能也是挺常用的

#這是wxml程式碼最主要的是scroll- x="true" 讓導(dǎo)覽列在水平方向可以滑動scroll-with-animation="true"是讓滑動產(chǎn)生動畫，scroll-into-view="{{scrollTop }}"

      <scroll-view  scroll-x="true"
                 scroll-with-animation="true"
                 style="width:100%;" class="scroll-view_H " 
                 scroll-into-view="{{scrollTop}}">
        <view 
        wx:for="{{goodsNav}}"
        wx:key="index"
        id="{{item.id}}"
        data-index="{{index}}"
        data-type="{{item.type}}"
        bindtap="changegoods"
        class="scroll-view-item_H {{activeNavIndex == index?&#39;active&#39;: &#39;&#39;}}  "
        >
          <text>{{item.text}}</text>
        </view>
      </scroll-view>
    </view>

這是綁定在導(dǎo)覽列上面的事件let {index, type} = e.currentTarget.dataset;提取到index 和type ，然後設(shè)定一個count當(dāng)作前幾個不動，然後拼接給id，把id的值傳給scrollTop，讓導(dǎo)覽列跳到scrollTop這個值，這個值就是在中間

     console.log(e);
    let {index, type} = e.currentTarget.dataset;
    console.log("index=" +index, "type="+type);
    this.setData({
      activeNavIndex:index
    })
    if (type == 'recommend') {
      this.setData({
        goodsList: this.data.recommend
      })
    } 
    else {
        let goods = this.data.recommend.filter((good) => good.camptype == type )
        this.setData({
          goodsList: goods
        })
        //console.log(this.data.goods)
      }
    
      var index1 = e.currentTarget.dataset.index;
      var count = 2;
      var id = "item"+(index1-count);//拼接id
      if(count == 2 && index1 < 3 || count == 3 && index1 < 2 || count == 4 && index1 < 3){
        id = "item0";
      }
      console.log("下標(biāo)",index1,"---分類id名稱",id)
      this.setData({
        scrollTop: id
      })
    },

這樣再加上wxss後就可以達到效果了 不過這樣的寫有一個問題，就是當(dāng)顯示的內(nèi)容為偶數(shù)時，如6，則不能正確的跳到正中間，會跳到3的位置，那樣就有一點兒偏差，這個問題我暫時還沒有解決，不知道有沒有大佬知道這個怎麼解決呢？

原始碼

這裡有專案完整的原始碼，上面給的是部分程式碼，如果有興趣的可以去看看完整原始碼

https: //gitee.com/xinccc/fullstack_huoshan/tree/master/wxapp/dewu

總結(jié)

這是我第一次寫一次稍微完整的項目，這裡主要介紹了我在開發(fā)過程中遇到的主要困難，雖然總體來說沒有什麼難點，但是對我來說還是意義挺大的，有了一次這樣的經(jīng)歷，讓我發(fā)現(xiàn)了我還有很多內(nèi)容需要學(xué)習(xí)，也感謝在我有困難時幫我指點迷津的老師和同學(xué),如果你感覺這篇文章有g(shù)et到你的地方，不妨給我點個贊，這將為我莫大的鼓勵，各位大佬如果有什麼指點的話，希望可以在評論區(qū)一起探討學(xué)習(xí)。

更多程式相關(guān)知識，請造訪：程式設(shè)計入門！ ！

以上是深入講解小程式中實作搜尋功能的方法的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！