vant+vue 实现联想输入框

实现一个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、声明
改的别人的联想输入框，忘记改的谁的了