Operate the search component to display on the keyboard

This time I will bring you the precautions for operating the search component to display on the keyboard. The following is a practical case. Let’s take a look.

The code is as follows:

<form action="" target="frameFile">
 <mt-search v-model="value" placeholder="请输入关键字" @keyup.native.enter="search(value)">
 <p v-infinite-scroll="loadMore()" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
  <ListItem :lists="lists"></ListItem>
  <p class="loading-text" v-if="(loadingTextBtn==true)"><span v-text="loadingText"></span><mt-spinner v-if="(loadingComplete==false)" type="snake" :size="10"></mt-spinner></p>
 </p>
 </mt-search>
 <iframe name=&#39;frameFile&#39; style="display: none;"></iframe>
</form>

Solution:

The input of the search component of mint-ui is also of type="search" by default, but it also needs to be wrapped with a set of form tags in the outer layer and with actions, so that the search button will appear in the keyboard.

The above is method one:

When you click search on the mobile keyboard, the page will refresh, so add a target to the form. The target specifies where to open the action URL. Then put a hidden iframe and name the value of the target of the form, so that on the current page Display the search content

The following is method two:

<form action="" onsubmit="return false;">
  <mt-search v-model="value" placeholder="请输入关键字" @keyup.native.enter="search(value)">
   <p v-infinite-scroll="loadMore()" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
   <ListItem :lists="lists"></ListItem>
   <p class="loading-text" v-if="(loadingTextBtn==true)"><span v-text="loadingText"></span><mt-spinner v-if="(loadingComplete==false)" type="snake" :size="10"></mt-spinner></p>
   </p>
  </mt-search>
</form>

Here, write return false directly to onsubmitevent to disable submission, and the search list page can also be displayed on the current page.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

The above is the detailed content of Operate the search component to display on the keyboard. For more information, please follow other related articles on the PHP Chinese website!