使用 Vue.js 突出顯示來自 Elasticsearch 的搜索結果

Question

我正在嘗試使用 Elasticsearch 后端和 Vue.js 前端構建一個搜索引擎。 它主要基於本教程。 bar.有人建議，一個不錯的功能是用初始搜索詞突出顯示搜索結果，即如果我在搜索欄中搜索“foo”，那么搜索結果將看起來像 bar。

我曾嘗試將 v-html 塊放入各種 div 中，但通常沒有成功。

我的彈性索引記錄符合這種格式：

result._source.Title,
result._source.description, 
result._source.contact, 
result._source.contactEmail

HTML：

 <div class="row">
    <div class="col-md-6" v-for="result in results" v-html="highlight(result._source.Title)">
        <div class="ul">
            <ul>
                <li>{{ result._source.Title }},</li>
                <li>{{ result._source.description  }},</li>
                <li>{{ result._source.contact }},</li>
                <li>{{ result._source.contactEmail }} </li>

JS：高亮功能

        highlight(text) {
            return text.replace(new RegExp(this.query, 'gi'), '<span class="highlight">$&</span>')
        }
}

我已經能夠實現基本功能來突出顯示單個數據點，但頁面的其余部分不會呈現。 例如，在此示例中，標題將突出顯示，但描述、聯系人和聯系人電子郵件不會在頁面上呈現。 此外，如果搜索詞與標題不匹配，頁面就會出錯。

Answer 1

這可能是由於您的v-html指令中的函數調用： highlight(result._source.Title) 。

相反，您應該使用v-html綁定到每個結果屬性，這允許您在更新模板之前替換任何屬性中的匹配項。

嘗試更新類似於以下內容的代碼：

 new Vue({ el: '#app', data() { return { content: [{ title: 'Result 1', text: `Phasellus euismod neque diam, aliquam commodo neque venenatis in. Sed non eros lorem. Fusce sit amet gravida nunc. Nunc non pulvinar tellus. Donec rutrum sagittis nulla eu commodo. Morbi condimentum molestie tortor venenatis dignissim. Aenean ac ligula at lectus pharetra sagittis. Integer convallis ipsum ex, ut congue urna auctor in. Sed consequat elit ipsum, eu vestibulum nisl egestas sit amet. Aenean eu mi et metus congue porttitor ut vitae augue. Donec congue semper euismod. Nam eget turpis eros. In vitae viverra eros.` }, { title: 'Result 2', text: `Nunc vehicula lorem a enim pharetra pellentesque. Nullam nulla nisi, imperdiet at blandit in, molestie sed ipsum. Curabitur elit nisl, aliquam vel urna at, tincidunt interdum tortor. Sed lacinia urna non tellus consectetur molestie. Cras nunc justo, suscipit eu luctus eget, viverra at nisl. Curabitur ut sodales justo, sit amet varius arcu. Nulla non varius justo, ut mattis diam. Nam venenatis malesuada enim. Ut id convallis augue. Pellentesque pretium aliquam porttitor. Donec at velit pulvinar, consequat eros at, ultrices urna. Sed non nisl tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam dictum ipsum dolor, vitae volutpat dolor porta non.` }, { title: 'Result 3', text: `Morbi bibendum justo enim, aliquam placerat magna euismod in. Sed ullamcorper augue ac nisl efficitur, eget ullamcorper neque rhoncus. Duis ac tristique orci. Curabitur lorem purus, varius eu sodales non, feugiat auctor orci. Pellentesque feugiat, felis eu accumsan ornare, lacus metus ultrices ipsum, vitae consequat velit neque in sapien. Nunc fringilla sollicitudin hendrerit. Vestibulum at massa convallis, finibus lacus ac, venenatis nulla. Nulla in condimentum metus. Donec sagittis nulla sed elit semper tristique. Vivamus facilisis sed lectus sed semper.` }, { title: 'Result 4', text: `Phasellus suscipit eros ex, sed auctor turpis accumsan non. In ultrices convallis sem id tempor. Sed elementum ac lectus et scelerisque. Mauris vel leo a sem elementum volutpat. Vestibulum congue urna id velit porta, id scelerisque nulla pulvinar. Aliquam sit amet iaculis enim. Vestibulum enim tortor, sodales ut pharetra semper, eleifend sed lectus. Phasellus fringilla leo vel turpis feugiat lacinia. Morbi neque dui, vulputate eget molestie non, hendrerit eu felis. Phasellus erat erat, tempus ut mi ut, maximus dapibus nulla. Phasellus dignissim sollicitudin velit sit amet rhoncus. Curabitur commodo magna eget ex consequat, eget sollicitudin metus rhoncus. Aenean enim libero, dictum nec tempus quis, molestie at nulla.` }, { title: 'Result 5', text: `Mauris ullamcorper mauris nec justo sodales, ac facilisis ipsum fringilla. Nam at urna eu ante luctus dignissim. In sit amet magna aliquam nibh tincidunt luctus vitae at arcu. Proin eu cursus tortor. Proin porttitor erat ac tortor ullamcorper lacinia. Curabitur sit amet ullamcorper ligula, rhoncus euismod est. Praesent non quam fermentum, bibendum lectus vel, auctor enim. Fusce eu viverra lectus. In molestie sit amet velit bibendum accumsan. Donec venenatis, urna sed convallis gravida, est est luctus mi, quis maximus ipsum metus sit amet ex. Vestibulum et nisi eu enim faucibus fermentum. Pellentesque pellentesque ultrices risus vel rutrum. Curabitur hendrerit urna in leo finibus rutrum. Maecenas posuere ultricies lectus eget elementum. Sed lacinia efficitur nisl, ac gravida urna ullamcorper consectetur. Aliquam erat volutpat.` } ], search: null } }, computed: { blocks() { if (this.search) { const regex = new RegExp(this.search, 'g') return this.content.map(c => { return { title: c.title.replace(regex, `<span class="highlight">${this.search}</span>`), text: c.text.replace(regex, `<span class="highlight">${this.search}</span>`) } }) } return this.content } } })

 .highlight { background-color: yellow; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <input type="text" v-model="search"> <ul> <li v-for="(block,i) in blocks" :key="i"> <p>Title: <span v-html="block.title"></span></p> <p>Text: <span v-html="block.text"></span></p> </li> </ul> </div>