- it技术
- vue实现 输入框 模糊搜索
vue实现 输入框 模糊搜索
<!DOCTYPE html
>
<html
>
<head
>
<meta charset
="utf-8">
<title
>vue过滤器模糊搜素
</title
>
<!--引入vue
-->
<script src
="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type
="text/javascript" charset
="utf-8"></script
>
</head
>
<style
>
#fuzzy_search
{margin
-left
:30px
;position
:relative
;}
#fuzzy_search input
{height
:25px
;border
-radius
:5px
;border
:1px solid #
999;}
.sss
{position
:absolute
;height
:170px
;width
:175px
;background
-color
:#fff
;z
-index
:200;overflow
: hidden
;border
:1px solid #aaa
;border
-radius
:5px
;right
:3%;box
-shadow
: 5px
5px
5px #e1e1e1
;overflow
-y
: auto
;padding
:2% 0;left
:0;}
.sss table
{width
:100%;}
.sss td
{font
-size
:0.28rem
;color
:#
333;padding
-bottom
:6%;padding
-left
:4%;}</style
>
<body
>
<div id
="fuzzy_search">
<input type
="text" v
-model
="text" @focus
="content=true" >
<!--搜索内容窗口
-->
<div
class='sss' v
-show
="content==true">
<table
>
<tbody
>
<tr v
-for="(i,index) in filtration">
<td @click
="xz(i)">{{i
.name
}}</td
>
</tr
>
</tbody
>
</table
>
</div
>
</div
>
</body
>
<script
>
new Vue({
el
:"#fuzzy_search",
data
:{
content
:false,
text
:"",
info
:[{name
:'选择我'},{name
:'你是谁'},{name
:'橘子'},{name
:'苹果'},{name
:'猕猴桃'},{name
:'猕猴桃二号'},{name
:'猕猴桃三号'},{name
:'猕猴桃四号'},]
},
methods
:{
xz
: function(i
){
this.text
=i
.name
this.content
=false
}
},
computed
:{
filtration(){
if(this.text
){
return this.info
.filter(
item
=>
item
.name
.indexOf(this.text
)>-1
)
}else{
return this.info
}
}
}
})
</script
>
</html
>
