vue中实现中，自动补全功能

标签：htm   文本框   添加   col   group   fixed   实现   tac   debug   

知识点：利用vue的基本语法实现，自动补全功能

 参考博客：https://www.jb51.net/article/136282.htm

效果：在文本框中，输入相关名称，调用后台接口，将数据填充到下拉div中，然后选择相应的选项，将值赋值到文本框中 （暂时是离开文本框，触发下拉框div,之后会改进demo）

代码：

<div style="width: 800px">
    <div v-for="(v,i) in contactlist">
        <div data-repeater-list="">
            <div data-repeater-item>
                <div class="form-group  m-form__group row" style="padding-top: 15px;padding-bottom: 15px;">
                    <label class="col-form-label col-lg-2 col-sm-12">联系人<span
                            style="color: #F00">*</span>
                    </label>
                    <div class="col-lg-3">
                        <input type="text" v-model="contactlist[i].name" @change="onchangContactPersonName(i)"
                               class="form-control m-input&#45;&#45;fixed"
                               placeholder="请搜索联系人名称"/>
                        <div class="select-panel">
                            <div v-show="contactlist[i].isShow" v-for="w in words" class="select-item" @click="click_item(w,i)">{{ w.NAME }}</div>
                        </div>
                    </div >
                    <label class="col-form-label col-lg-2 col-sm-12">电话<span
                            style="color: #F00">*</span></label>
                    <div class="col-lg-3">
                        <input type="text" v-model="contactlist[i].phone"
                               class="form-control m-input&#45;&#45;fixed"
                               placeholder=""/>
                    </div>
                    <div class="col-lg-1">
                        <div data-repeater-delete=""
                             style="margin-left: 25px"
                             v-on:click="deleteContactNode(i)"
                             class="btn-sm btn btn-danger m-btn m-btn--icon m-btn--pill">
                                                  <span style="width: 20px;height: 25px;">
                                                    <!--<i class="la la-trash-o"></i>-->

                                                     <span> 删除</span>
                                             </span>
                        </div>
                    </div>
                    <div class="col-lg-1">
                        <div data-repeater-create=""
                             style="width: 55px;margin-left: 15px"
                             v-on:click="addContactNode()"
                             class="btn btn btn-sm btn-brand m-btn m-btn--icon m-btn--pill m-btn--wide">
                                                <span style="width: 20px;height: 25px;margin-left: -13px">
                                                <!--<i class="la la-plus"></i>-->
                                                                           <span> 添加 </span>
                                                </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // register the component
    Vue.http.options.emulateJSON = true;
    Vue.component(‘treeselect‘, VueTreeselect.Treeselect)
    new Vue({
        el: ‘#app‘,
        data: {
            //联系人数组
            contactlist:[
                {id:‘‘,name: ‘‘, phone: ‘‘,isShow:false}
            ],

            words: [],//联系人名搜索数组
        },

//监听联系人变化
onchangContactPersonName:function (i) {
    var name=this.contactlist[i].name;
    this.$http.post("/contact/findContactPersonList",{name:name}).then(function(response) {
        this.words = response.data;
        //如果药品名称搜索为空，则给出提示
        if(this.words.length<1){
            alert("没有您要搜索的联系人!");
            this.contactlist[i].name=‘‘;//清空输入的内容
        }else {
            this.contactlist[i].isShow=true;//显示药品下拉框
        }


    }).catch(function(response) {
        alert("调用后台接口失败!");
    });
},

//单个联系人选项点击事件
click_item:function(w,i) {
    debugger
    this.contactlist[i].id=w.ID;
    this.contactlist[i].name=w.NAME;
    this.contactlist[i].isShow=false;
    // 校验联系人名称是否已经输入
    this.VerifyContactName(i);
},

//校验联系人名称，在数组中是否已经存在
VerifyContactName:function (i) {
    var flag=true;
    var tempId=this.contactlist[i].id;
    for(var j=0;j<i;j++){
        if(this.contactlist[j].id==tempId){
            flag=false;
        }
    }
    if(flag==false){
        alert("联系人名称已输入!");
        this.contactlist[i].id=‘‘
        this.contactlist[i].name=‘‘;//清空输入的内容
        return false;
    }else {
        return true;
    }
},

 }
})
</script>

源码链接：https://github.com/shuaishuaihand/vuedynamicdivdemo.git

vue中实现中，自动补全功能

标签：htm   文本框   添加   col   group   fixed   实现   tac   debug   

原文地址：https://www.cnblogs.com/shuaifing/p/10311907.html