vue中實現中,自動補全功能


知識點:利用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
 
       

 

打賞

免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2022 CODEPRJ.COM