关于前端:vantvue-实现联想输入框

实现一个 vue 的联想输入框。能够独自应用，也能够放到 <vant-filed/>

1、先实现一个表单
引入 smart-input 组件
<van-form ref=”attrFrom” @submit=”onSubmit”>

   <van-field
   name="my-field" 
   :label="attr.attrName"
   label-align="right"
   label-width="8em"
   :right-icon="'edit'"
   >
    <template #input>
      <smart-input id="service" @sync="syncService" :props="attr"></smart-input>
    </template>
  </van-field>
  </van-form>

2、smart-input 实现
<div class=”friendSearchContainer”>

<input v-model="qryData.addrName"
    ref = "input"
    class="smartInput"
    data-toggle="tooltip" 
    @click="init" 
    @keyup="search" 
    @blur="blur" 
/>
<ul v-show="searching" v-infinite-scroll="load" class="friendSearchList">
    <li ref = "li" v-for="(item, index) in filtered"
    :class="{active: item.isActive, hover: item.isHover}"
    @click.stop="clickOne(index)">
     {{item.addrName}}
    </li>
</ul>
<div v-show="searching" class="friendSearchModal" @click="searching=false"></div>

</div>
3、成果

4、近程仓库地址
https://gitee.com/mamy3/smart…
5、申明
改的他人的联想输入框，遗记改的谁的了