[applet project development -- JD mall] user defined search component of uni app (middle) -- search suggestions

Welcome to
Magic house ！！

The article contains columns
-- 2022 Wechat applet Jingdong Mall actual battle --

Column content
-- uni-app Project structures, --
-- Jingdong Mall uni-app To configure tabBar & Window style --
-- Jingdong Mall uni-app Developed subcontracting configuration --
-- Jingdong Mall uni-app Developed rotation chart --
-- Jingdong Mall uni-app The classified navigation area --
-- Jingdong Mall uni-app Home floor products --
-- Jingdong Mall uni-app Product classification page （ On ） --
-- Jingdong Mall uni-app Product classification page （ Next ） --
-- Jingdong Mall uni-app Custom search component （ On ） --

One 、 Rendering UI structure

• You can add this... In the development tool Page compilation mode （ Each compilation is on this page ）

Use uni-app Official search component Quick build Input box

The search component and custom structure provided by the official component are as follows

<uni-search-bar :radius="100" @input="input" cancelButton="none" bgColor="#dfdfdf"></uni-search-bar>

effect ：

• Set background method 1 （ use view The parcel , Set the style ）：

<view class="search-box">
   <uni-search-bar :radius="100" @input="input" cancelButton="none" bgColor="#dfdfdf"></uni-search-bar> </view> .search-box {
    
   background-color: #ff1e0a;
 }

• Set background method 2 （ Set in the official component ）
  stay uni_modules Find the official component package

• effect （ equally ）

• Add ceiling effect （ Stay at the top of the page ）

 .search-box {
    
   //  Imbibition 
   position: sticky;
   top: 0;
   z-index: 999;
 }

Two 、 input Event handling

stay input In the component , The values entered are input Among the parameters passed by this function （ No e.value, The official will input Event binding event structure by value value ）

 methods: {
    
      //  Search box input Event handling 
      input(e){
    
        console.log(e)  //  Output the corresponding value 
      } 
    }

effect

3、 ... and 、 The search box automatically gets the focus

When the user clicks the search box When you jump to the search page , The search box automatically gets the focus （ You can enter ）

• Modify the official component source file as follows show , showsync The attribute is true( Make it true , If the focus is true, it shows ）
  
• Revised as follows
  
• Be careful （ The preview effect needs to be previewed on the real machine , The development tools are more or less incompatible with the real machine ）：
  

Four 、 Anti shake processing

You can see , Every time you type Typing data will trigger once input request , We set it at Within 500 milliseconds The request is not triggered when the user enters data , 500 milliseconds later The request is triggered when the user does not input data , Realization Anti shake processing

Here we go through JavaScript Time delayer Medium setTimeout and clearTimeout Realization ( Delay and cancel delay ）

• setTimeout Grammar format

setTimeout( Code to execute ,  The number of milliseconds to wait )
setTimeout(JavaScript  function ,  The number of milliseconds to wait )

• clearTimeout Grammar format

clearTimeout()  Method can be cancelled by  setTimeout()  Method .
clearTimeout()  The parameters of the method must be set by  setTimeout()  Back to  ID  value （ Corresponding cancellation ）.

• The final implementation code （ Be careful timer Global variable ）

 data() {
    
      return {
    
        inputString: '',
        timer: null
      };
    },
    methods: {
    
      //  Search box input Event handling 
      input(e) {
    
        //  Triggering event   Cancel assignment 
        clearTimeout(timer)
        // 500 Assign value after milliseconds 
        timer = setTimeout(() => {
    
          this.inputString = e
          console.log(this.inputString)
        }, 500)
      }

effect ：

5、 ... and 、 Query and search the list of suggestions according to keywords

5.1 Data request

• Request parameters

Parameter name	Parameter description	remarks
query	Query content	Such as ： goods/qsearch?query= millet

• Interface data style

{
    
    "message": [
        {
    
            "goods_id": 57332,
            "goods_name": "400 ml   Seafood frozen ice packs   Water filled ice bags, medical ice bags, outdoor cold storage, fresh preservation, cold storage of cooked food, repeated use （10 Individual outfit ）"
        },
        {
    
            "goods_id": 57194,
            "goods_name": " Yili car washing tools, car beauty products, sponge brush, no damage to the car paint, wipe the car, sponge cleaning sponge "
        }
    ],
    "meta": {
    
        "msg": " To be successful ",
        "status": 200
    }
}

• Definition data Data nodes searchResults

    data() {
    
      return {
    
        inputString: '',
        timer: null,
        searchResults: ''
      };
    },

• Again input In the event handler function Fetch data function getsearchList

 input(e) {
    
        //  Triggering event   Cancel assignment 
        clearTimeout(this.timer)
        // 500 Assign value after milliseconds 
        this.timer = setTimeout(() => {
    
          this.inputString = e
          this.getSearchList()
        }, 500)
      }

• Definition getsearchList function （ Determine whether it is a space and an empty string ）

 async getSearchList() {
    
        //  If it is an empty string   Don't ask for 
        if (this.inputString == '') {
    
          this.searchSuggest = []
          return
        }
        //  If space , False report 
        else if (this.inputString.trim() === '') return uni.$showMsg(' Incorrect input ')
        
        const {
    
          data: res
        } = await uni.$http.get('/api/public/v1/goods/qsearch', {
    
          query: this.inputString
        })
        //  Request error report error 
        if (res.meta.status != 200) return uni.$showMsg()
        //  assignment 
        this.searchSuggest = res.message
      },

• effect ( You can see searchList Successfully received value ）：
  
• An error is reported when entering a space
  

5.2 Rendering UI structure

• structure

 <!--  Search suggestion list container  -->
    <view class="sgg-list-container">
    <view class="sgg-item" v-for="(product,i) in searchResults" v-bind:key="i">
      <view class="sgg-name">{
   {product.goods_name}}</view>
      <uni-icons type="right"></uni-icons>
    </view>
  </view>

• style

.sgg-list-container {
    

 .sgg-item {
    
   display: flex;
   background-color: #fff;
   align-items: center;
   border-top: 3rpx solid #efefef;
   justify-content: space-between;
   padding: 20rpx 10rpx;

   .sgg-name {
    
     //  Line breaks are not allowed 
     white-space: nowrap;
     //  Beyond does not show 
     overflow: hidden;
     //  Beyond text ellipsis Instead of 
     text-overflow: ellipsis;
     margin-right: 5rpx;
     font-size: 28rpx;
   }
 }
}

effect ：

5.3 Click suggest to jump to the details page

• Method 1 Component jump ： take view Change it to navigator Components Simultaneous transmission goods ID Parameters

structure

 <!--  Search suggestion list container  -->
    <view class="sgg-list-container">
    <navigator class="sgg-item" v-for="(product,i) in searchResults" v-bind:key="i" :url="'/subpackages/goods_list/goods_list?cat_id=' + product.goods_id">
      <view class="sgg-name">{
   {product.goods_name}}</view>
      <uni-icons type="right"></uni-icons>
    </navigator>
  </view>

• Method 2 Programming jump : binding click event , Defined function

 <!--  Search suggestion list container  -->
    <view class="sgg-list-container">
    <view class="sgg-item" v-for="(product,i) in searchResults" v-bind:key="i" @click="gotogoodlist(product)">
      <view class="sgg-name">{
    {
    product.goods_name}}</view>
      <uni-icons type="right"></uni-icons>
    </view>
  </view>


gotogoodlist(item){
    
  uni.navigatorto({
    
     url = "'/subpackages/goods_list/goods_list?cat_id=' + item.goods_id"
})

effect ：

 Thanks for reading , Your praise and collection are the biggest motivation for me to create ！