vue实现模糊搜索
根据名称进行关键词搜索
template>
<div class="wrap">
<div class="searchInput">
<input type="text" placeholder="请输入产品名称或PN" v-model="searchData">
<button @click="search" id="btn">搜索</button>
</div>
<div class="content">
<div class="title">
<div>id</div>
<div>name</div>
<div>username</div>
<div>email</div>
<!-- <div>phone</div> -->
</div>
<div v-for="(ele,index) in list" :key="index">
<div class="info">
<div>{{ele.id}}</div>
<div>{{ele.name}}</div>
<div>{{ele.username}}</div>
<div>{{ele.email}}</div>
<!-- <div>{{ele.phone}}</div> -->
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
searchData: "",
list:[],
modules: [],
searchKey: {},
}
},
created() {
this.getData();
},
mounted() {
document.onkeydown = function (event) { // 回车实现点击功能
var e = event || window.event;
if (e && e.keyCode == 13) {
$("#btn").click();
}
};
},
watch: { // watch实时监控输入内容,如果没有任何内容,则显示整个列表
searchData(current, old) {
let that = this;
if(current == ''){
that.list = that.modules
}
}
},
methods:{
search() {
let that = this;
if (that.searchData === '' || typeof(that.searchData)=="undefined")
{
that.list=that.modules;
}else{
that.list=[]
that.modules.map(function(item) {
console.log(typeof item.id);
if (item.name.search(that.searchData) != -1) { // 筛选条件
that.list.push(item);
}
});
}
},
getData(){
let that = this;
// http://jsonplaceholder.typicode.com/users
this.$http.get('/users').then(function(res){ // 获取数据 利用代理服务器获取
console.log(res)
if(res.status == 200){
that.modules = res.data;
console.log(res.data)
that.list=that.modules;
}else{
alert('服务异常!');
}
},function(res){
// alert(res.status);
});
},
}
}
</script>
* {
padding:0;
margin: 0;
}
input,button {
background:none;
outline:none;
border:0px;
}
a{
text-decoration: none;
}
.wrap {
width: 100%;
height: 100%;
position: relative;
min-width: 1000px;
}
.searchInput {
width: 542px;
height: 52px;
/* border: 1px solid red; */
margin: 0 auto;
box-sizing: border-box;
}
.searchInput input {
border: 1px solid #8a8a8a;
width: 420px;
height: 53px;
line-height: 50px;
box-sizing: border-box;
padding-left: 40px;
font-size: 14px;
background:url('./img/search.png') no-repeat 1% 45%;
background-size: 6%;
}
.searchInput button {
width: 100px;
height: 53px;
line-height: 50px;
font-size: 16px;
margin-left: 4px;
border: 1px solid #8a8a8a;
background: #bfbfbf;
border-radius: 6px;
color: #fff;
cursor: pointer;
}
.content {
width: 1200px;
/* border: 1px solid red; */
margin: 60px auto;
}
.title {
height: 50px;
width: 1200px;
font-size: 0;
}
.title div {
width: 230px;
height: 50px;
background: #9dc3e6;
display: inline-block;
font-size: 16px;
border-right: 1px solid white;
border-top: 1px solid white;
line-height: 50px;
}
.info {
height: 40px;
width: 1200px;
font-size: 0;
}
.info div {
width: 230px;
height: 40px;
background: #eaeff7;
display: inline-block;
font-size: 16px;
border-right: 1px solid white;
border-top: 1px solid white;
line-height: 40px;
}
代理服务器配置 config中的index.js文件
proxyTable: {
'/api': {
target: 'http://jsonplaceholder.typicode.com',//请求的服务器地址
changeOrigin: true, //是否跨域
pathRewrite: {
'^/api':'/' //路径
}
}
},
main.js中
import VueAxios from 'vue-axios'
Vue.use(VueAxios, Axios)
Axios.defaults.baseURL = apiConfig.baseUrl;
在config中新建文件api.config.js
判断是测试环境还是服务器环境
const isPro = Object.is(process.env.NODE_ENV, 'production')
module.exports = {
baseUrl: isPro ? 'http://jsonplaceholder.typicode.com/' : 'api/'
}
这样就可以实现一个简单的模糊搜索了,欢迎指正