关于前端: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、申明
改的他人的联想输入框，遗记改的谁的了