最近開發一個桌面端的全局搜索，利用鍵盤上下鍵切換選中內容，類似于釘釘一樣的效果，如圖：

html：

<div class="rong-search-main"><inputtype="text"v-model="keyword"@keydown.up.prevent="itemChangeUp" @keydown.down.prevent="itemChangeDown"@keyup.esc="clear"@keyup.enter.prevent="itemEnter"@focus="inputFocus"@blur="inputBlur"class="rong-field rong-field-search field-search-input":placeholder="`${locale.btns.search}${searchKey ? `（${searchKey}）` : ''}`"ref="searchBox"/><i class="rong-search-icon"></i><button v-if="keyword" class="rong-search-clear" type="button" :title="locale.btns.clear" @click="clear"></button></div> <div v-if="showGroups && (tabKey === 'group' || tabKey === 'song')" class="rong-search-members rong-search-groups"><div v-show="tabKey === 'song'" class="rong-search-members-hd"><!-- <template v-if="groups.length > 3"><a v-if="currentView === 'groups'" href="#collapse" @click.prevent="currentView = ''">{{locale.btns.collapse}}</a><a v-else href="#more" @click.prevent="currentView = 'groups'">{{locale.btns.more}}</a></template> --><h2>{{locale.contact.group}}（{{groups.length}}）</h2></div><ul ref="showList" class="rong-group-userlist-bd rong-searchList-Wrap" v-scrollTop><li v-for="(group, index) in tabKey === 'group' ? groups : groupsList" :key="index" class="searchList-item"><div dataTag="click" class="rong-result-item rong-clearfix rong-clickable" @click="showConversation(3, group.id)"><avatar class="rong-result-item-aside rong-group-avatar" :group="group"></avatar><div class="rong-result-item-main"><div class="rong-search-name"><span v-html="getHighlightGroupName(group)"></span><span v-if="showGroupType(group)" class="rong-tag" :class="'team-tag-'+group.type">{{getGroupType(group.type)}}</span>({{group.member_count}})</div><div v-if="getMatchedMembers(group)" class="rong-search-summary" v-html="locale.tips.contain + getMatchedMembers(group)"></div></div></div></li></ul><ul class="rong-searchList-Wrap"><li v-show="groups.length > 2 && tabKey === 'song'" class="searchList-item"><div dataTag="click" class="see-more" @click.stop="tabKey = 'group'">查看更多群組<i class="iconfont icon-next"></i></div></li></ul></div>

?js：

let itemSelectedIndex = 0; let eleScrollTop = 0; // 定義內容區滾動距離// 頂部切換的時候默認選中第一個tabHandle() {let context = this;const $content = $(context.$refs.list);let allLi = $content.find('li:visible');allLi.each(function(i){if (i === 0) {$(this).css("background-color","#ecf0f6")} else {$(this).css("background-color","#ffffff")}});},// 向上itemChangeUp(event) {let context = this;const $content = $(context.$refs.list);let allLi = $content.find('li:visible');itemSelectedIndex--;if (itemSelectedIndex < 0) {itemSelectedIndex = 0;// eleScrollTop = 0;}// event.preventDefault(); // 阻止輸入框有文字的時候，光標跑到文字前面if (allLi.length === 0) {return;}let currentLi = allLi.eq(itemSelectedIndex);allLi.each(function(i){$(this).css("background-color","#ffffff")});currentLi.css("background-color","#ecf0f6");// 鼠標上下切換效果-實現釘釘一樣const el = currentLi[0];const wrapper = $content[0];if(el.offsetTop < wrapper.scrollTop){ if (wrapper.scrollTop !== 0) {if (itemSelectedIndex == 0) {eleScrollTop = eleScrollTop - 20;}eleScrollTop = eleScrollTop - el.clientHeight;$content.scrollTop(eleScrollTop);el.scrollIntoView({ behavior: 'smooth', block: 'start' });}}},// 向下itemChangeDown(event) {let context = this;const $content = $(context.$refs.list);let allLi = $content.find('li:visible');itemSelectedIndex++;if (itemSelectedIndex >= allLi.length) {itemSelectedIndex--;return;}if (allLi.length === 0) {return;}let currentLi = allLi.eq(itemSelectedIndex);allLi.each(function(i){$(this).css("background-color","#ffffff")});currentLi.css("background-color","#ecf0f6");// 鼠標上下切換效果-實現釘釘一樣const el = currentLi[0];const wrapper = $content[0];if(el.offsetTop > wrapper.scrollTop + wrapper.clientHeight){ if (itemSelectedIndex == allLi.length - 1) {eleScrollTop = eleScrollTop + 20;}eleScrollTop = eleScrollTop + el.clientHeight;$content.scrollTop(eleScrollTop);el.scrollIntoView({ behavior: 'smooth', block: 'end' });}},// 回車itemEnter(event) {let context = this;const $content = $(context.$refs.list);let allLi = $content.find('li:visible');let bgColor = 'rgb(236, 240, 246)';function reset() {context.isNoData = false;context.showSearchContent = true;context.focus(); // 讓輸入框獲取焦點itemSelectedIndex = 0;eleScrollTop = 0;context.tabHandle(event);}allLi.each(function(i){if ($(this).css("background-color") == bgColor) {let itemHtml = $(this).children().html()if (itemHtml.includes("查看更多聯系人")) {context.tabKey = 'contacts';reset()return}if (itemHtml.includes("查看更多群組")) {context.tabKey = 'group';reset()return}if (itemHtml.includes("查看更多聊天記錄")) {context.tabKey = 'record';reset()return}if (itemHtml.includes("查看更多公眾號")) {context.tabKey = 'pubs';reset()return}if (itemHtml.includes("查看更多文章")) {context.tabKey = 'pubs';reset()return}context.searchBoxBlur();$(this).children().trigger('click') // children()只考慮子元素而不考慮所有后代元素}});},

?展示的容器：

?

總結

以上是生活随笔為你收集整理的全局搜索利用键盘上下键切换选中内容的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。