js中的正则表达式 使用Docker和Elasticsearch搭建全文本搜索引(13)

},

methods: {

/** Debounce search input by 100 ms */

onSearchInput () {

clearTimeout( this.searchDebounce)

this.searchDebounce = setTimeout(async () => {

this.searchOffset = 0

this.searchResults = await this.search()

}, 100)

},

/** Call API to search for inputted term */

async search () {

const response = await axios. get(`${ this.baseUrl}/search`, { params: { term: this.searchTerm, offset: this.searchOffset } })

this.numHits = response. data.hits.total

returnresponse. data.hits.hits

},

/** Get next page of search results */

async nextResultsPage () {

if( this.numHits > 10) {

this.searchOffset += 10

if( this.searchOffset + 10> this.numHits) { this.searchOffset = this.numHits - 10}

this.searchResults = await this.search()

document.documentElement.scrollTop = 0

}

},

/** Get previous page of search results */

async prevResultsPage () {

this.searchOffset -= 10

if( this.searchOffset < 0) { this.searchOffset = 0}

this.searchResults = await this.search()

document.documentElement.scrollTop = 0

}

}

})

应用特别简单，只是定义一些共享数据属性，添加一个接收方法以及为结果分页的功能；搜索间隔设置为100ms，以防API被频繁调用。

解释Vue.js如何工作超出本文的范围，如果想了解相关内容，可以查看Vue.js官方文档[2]。

7.1 HTML

将/public/index.html用如下内容代替：

<!DOCTYPE html>

<htmllang="en">

<head>

<metacharset="utf-8">

<title>Elastic Library </title>

<metaname="deion"content="Literary Classic Search Engine.">

<metaname="viewport"content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<linkhref="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css"rel="stylesheet"type="text/css"/>

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/jisuanjixue/article-88488-13.html