1.實(shí)現(xiàn)的功能

輸入框輸入字符后，聯(lián)想詞列表出現(xiàn)，可以按“↓”或“↑”選擇列表中的內(nèi)容，也可以鼠標(biāo)點(diǎn)選，且互相不影響選擇樣式，即只會(huì)出現(xiàn)一個(gè)被選中，“Enter”鍵發(fā)起檢索。

2.DOM結(jié)構(gòu)

<template><div class="input-m"> <div class="search"> <input type="text" :placeholder=placeholder v-model="content" @keyup="input"> </div> <ul class="associate-list" v-show="associateWords&&showList" @mouseout="selectedLi(0)"><li class="associate-item">{{inputContent}}</li> <li class="associate-item" v-for="(item,index) of associateWords" :key="index" @mouseover="selectedLi(index+1)">{{item}}</li> </ul></div> </template>復(fù)制代碼

3.變量

content: '',---雙向綁定的數(shù)據(jù)，input輸入框中的內(nèi)容，用戶選擇聯(lián)想詞列表時(shí)同步變化inputContent: '',---保存用戶通過(guò)鍵盤輸入的內(nèi)容，不與用戶選擇的聯(lián)想詞列表同步變化focusIndex: 0,---用戶選擇的聯(lián)想詞<li>列表的下標(biāo)associateWords: [],---聯(lián)想詞列表數(shù)組showList: true---是否顯示聯(lián)想詞列表由此變量和associateWords的長(zhǎng)度共同控制

inputConent是用于記錄用戶通過(guò)鍵盤輸入的內(nèi)容，通過(guò)上下鍵選擇或鼠標(biāo)懸浮時(shí)選擇的會(huì)通過(guò)雙向綁定同步到content中，以百度搜索聯(lián)想詞列表為例，當(dāng)用戶一直按向下鍵時(shí)，超過(guò)聯(lián)想詞列表后，input框中的內(nèi)容為用戶最開始輸入的內(nèi)容。

focusIndex記錄用戶選擇的<li>標(biāo)簽的下標(biāo)，當(dāng)一直按向上或向下鍵時(shí)，會(huì)出現(xiàn)focusIndex超出<li>列表長(zhǎng)度的或小于0的清理，用focusIndex = (focusIndex+length)%length操作，可以實(shí)現(xiàn)fousIndex總是在0至length-1范圍內(nèi)。

當(dāng)通過(guò)document.getElementsByClassName獲取<li>數(shù)組時(shí)，數(shù)組下標(biāo)從0開始，而foucusIndex初始值為0，當(dāng)按下“↓”時(shí)，focusIndex+1,選中的就是<li>列表的下標(biāo)為1的元素，即第2個(gè)<li>,這是不合理的。

如果將focusIndex的下標(biāo)初始值設(shè)為-1，滿足了上邊的需求。那么當(dāng)按下“↑”時(shí)，focusIndex-1,通過(guò)取余操作可以得到foucusIndex = length-2,即<li>列表的倒數(shù)第2項(xiàng)，也是不合理的。

故將用戶輸入的文字內(nèi)容作為<li>列表的第一項(xiàng)，且隱藏，將focusIndex初始值設(shè)為0。這樣就實(shí)現(xiàn)了按上下鍵選擇，且超出顯示的長(zhǎng)度時(shí)，是用戶通過(guò)鍵盤輸入的內(nèi)容。

用showList與associateWords一起控制列表的顯示，沒(méi)有相關(guān)聯(lián)想詞時(shí)肯定不顯示，但用戶點(diǎn)擊輸入框以外的位置時(shí)，聯(lián)想詞列表應(yīng)該可以隱藏。如果采用將associateWords來(lái)隱藏的話，用戶再次點(diǎn)擊輸入框時(shí)，會(huì)多向服務(wù)器發(fā)送一次搜索相關(guān)聯(lián)想詞的請(qǐng)求。

4.JavaScript部分

input (e) { //keyup事件的event e = e || window.event this.showList = true // 按“↑” 鍵 if (e.keyCode === 38) { this.focusIndex-- this.selectedLi() } else if (e.keyCode === 40) { // 按“↓”,數(shù)組下標(biāo)從0開始,list的[0]項(xiàng)內(nèi)容為用戶輸入內(nèi)容，不顯示，從[1]項(xiàng)開始顯示 this.focusIndex++ this.selectedLi() } else if (e.keyCode === 13) { // 按“Enter”調(diào)用搜索函數(shù) this.doSomething() //----向后臺(tái)發(fā)送搜索請(qǐng)求 this.associateWords = [] } else { // 用戶繼續(xù)輸入時(shí)，將inputContent置空----非常重要的一步 this.inputContent = '' this.focusIndex = 0 // 搜索聯(lián)想內(nèi)容 this.getAssociateWords() //----向后臺(tái)請(qǐng)求相關(guān)聯(lián)想詞列表 this.clearSelected() } }復(fù)制代碼

與樣式相關(guān)的js操作

selectedLi (hoverIndex) { // 當(dāng)inputContent內(nèi)容為空時(shí)，記錄下搜索框中用戶輸入的內(nèi)容，作為associate-item的第一項(xiàng) if (this.inputContent === '') { this.inputContent = this.content } let associateList = document.getElementsByClassName('associate-item') // 移除已添加的.selected樣式 for (var i = 0; i < associateList.length; i++) { associateList[i].classList.remove('selected') } if (hoverIndex !== undefined) { this.focusIndex = hoverIndex } // 一直按向下鍵超出聯(lián)想內(nèi)容li長(zhǎng)度時(shí)，應(yīng)回到聯(lián)想內(nèi)容第一個(gè) this.focusIndex = (this.focusIndex + associateList.length) % associateList.length // 為選中的li添加.selected樣式 let selectedOne = associateList[this.focusIndex] this.content = selectedOne.textContent selectedOne.classList.add('selected') } clearSelected () { let associateList = document.getElementsByClassName('associate-item') // 移除已添加的.selected樣式 for (var i = 1; i < associateList.length; i++) { associateList[i].classList.remove('selected') } }復(fù)制代碼

為除了input框以外的頁(yè)面部分添加監(jiān)聽事件，點(diǎn)擊input以外的部分時(shí)，隱藏聯(lián)想詞列表

// 點(diǎn)擊input輸入框以外的位置時(shí) 隱藏聯(lián)想詞列表 document.body.addEventListener('click', e => { if (e.target.nodeName === 'INPUT') { this.showList = true } else { this.showList = false } })復(fù)制代碼

向后臺(tái)服務(wù)器請(qǐng)求聯(lián)想詞列表

getAssociateWords () { let self = this axios.get('XX/data.json').then(function (res) { self.associateWords = result.slice(0, 5) }) }復(fù)制代碼

總結(jié)

以上是生活随笔為你收集整理的vue输入框联想词功能的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。