搜尋歷史，熱門搜尋，高亮

今天來寫一篇關於input框的部落格，乙個簡單的案例，希望能夠幫助你們！！！廢話不多說，直接見**·····

="home"
>
<
!-- 頂部 --
>
="home-header-container"
>
="home-header-img"
>
"../assets/search.png" alt=
"">
<
/div>
="home-header-input"
>
"text" placeholder=
v-model=
"inpval"
@change=
"getinputval"
@input=
"onchange"
>
<
/div>
<
/div>
<
!-- 搜尋內容 --
>
<
!-- 匹配內容 --
>
="show-list" v-show=
"show"
>
for=
"(item,index) in showlist "
:key=
"index"
v-html=
"item.replace(inpval,`$`)"
>
<
/div>
<
/div>
="search-container"
>
=>
/h3>
="hot-search-item"
>
for=
"(item,index) in hotlist "
:key=
"index"
class
="hot-item"
@click=
"onclick(item)"
>
}<
/div>
<
/div>
<
/div>
=>
/h3>
="history-search-item"
>
for=
"(item,index) in hislist "
:key=
"index"
class
="his-item"
>
}<
/div>
<
/div>
<
/div>
<
/div>
<
/div>
<
/template>
import axios from
'axios'
export
default
,data()
},methods:)if
(index!=-1
)this
.hislist.
unshift
(item)if(
this
.hislist.length>4)
},// 文字框內容
getinputval()
;var index =
this
.hislist.
findindex
((ele)
=>)if
(index!=-1
)this
.hislist.
unshift
(str)
window.console.
log(
this
.hislist)if(
this
.hislist.length>4)
this
.inpval=
''this
.show=
false},
// 匹配關鍵字
ElasticSearch 高亮搜尋
什麼是highlight highlight就是我們所謂的高亮，即允許對乙個或者對個字段在搜尋結果中高亮顯示。比如字型加粗或者字型呈現和其他文字普通顏色等。三種高亮型別 es提供了三種高亮型別，lucene的plain highlighter，以及fast vector highlighter fv...
elasticesearch搜尋返回高亮關鍵字
使用highlight為查詢結果增加高亮效果 highlight 預設使用標籤包裹高亮字段 hits highlight highlight 使用tag schema styled可以使用es內建高亮樣式 highlight highlight highlight highlight預設只支援單個屬...
localStorage實現搜尋歷史
var historylistarr function render 判斷html裡面有資料沒 html html 沒有搜尋記錄 把資料渲染到ul裡面 history html html function sethistoryitems key 如果頁面初始化後將localstorage的內容同步到...