javascript - 如何仅在使用 vue js 进行搜索时显示搜索结果
问题描述
我正在使用 vue js 创建一个搜索过滤器,我当前的问题是,我想recentSearch
在创建页面时显示历史记录中的数据,而不是显示来自的所有 json 数据recentSearch
,然后当我开始输入时,它将从中检索过滤器数据searchProduct
我的json格式在searchProduct.php
{"result" : [
{ product_name: 'mike', business_name: 'student' },
{ product_name: 'beckham john', business_name: 'footballer' },
{ product_name: 'walcott', business_name: 'footballer' },
{ product_name: 'cech', business_name: 'footballer' },
{ product_name: 'jordan', business_name: 'actor' },
{ product_name: 'tom', business_name: 'actor' },
{ product_name: 'john', business_name: 'actor' }
],
"recent" : [
{ product_name: 'mike', business_name: 'student' },
{ product_name: 'beckham john', business_name: 'footballer' },
{ product_name: 'walcott', business_name: 'footballer' }
]}
示例
<div id="SearchVueContenPage">
<input type="search" v-model="q" name="q"/>
<ul>
<li v-for="row in filterSearchs" >{{row.product_name}}</li>
</ul>
</div>
这是我的 javascript
const appSearch = new Vue({
el: "#SearchVueContenPage",
data() {
return {
searchProduct: [], /*show this item only for search*/
recentSearch: [], /*show this when page load or not searching*/
q: ''
}
},
methods: {
},
created() {
fetch(ajax_appserver("public", "_api/searchProduct.php?fetch_api=true&getFromApp=vue&search="))
.then(response => response.json())
.then(json => {
this.searchProduct = json.result;
this.recentSearch = json.recent.slice(0, 3);
});
},
computed: {
filterSearchs: function(){
return this.searchProduct.filter((row) => {
var query = this.q.toLowerCase();
return row.product_name.toLowerCase().indexOf(query)>-1 || row.business_name.toLowerCase().indexOf(query)>-1;
});
}
}
});
解决方案
您可以filter
在计算属性中使用条件语句仅返回与搜索查询匹配的项目,以测试是否在搜索框中输入了任何内容,如果没有,则返回最近的搜索结果。
const data = {
"result": [{
product_name: 'mike',
business_name: 'student'
},
{
product_name: 'beckham john',
business_name: 'footballer'
},
{
product_name: 'walcott',
business_name: 'footballer'
},
{
product_name: 'cech',
business_name: 'footballer'
},
{
product_name: 'jordan',
business_name: 'actor'
},
{
product_name: 'tom',
business_name: 'actor'
},
{
product_name: 'john',
business_name: 'actor'
}
],
"recent": [{
product_name: 'mike',
business_name: 'student'
},
{
product_name: 'beckham john',
business_name: 'footballer'
},
{
product_name: 'walcott',
business_name: 'footballer'
}
]
}
new Vue({
el: '#app',
data() {
return {
filter: '',
items: null,
loading: false
}
},
computed: {
search() {
if (!this.items) {
return []
}
if (!this.filter) {
return this.items.recent
}
return this.items.result.filter(item => item.product_name.includes(this.filter) || item.business_name.includes(this.filter))
}
},
mounted() {
this.loading = true
this.fetchData().then(() => {
this.loading = false
})
},
methods: {
async fetchData() {
// here will simulate an ansynchronous call using fetch
//
// an actual fetch call will look something like the following:
//
// this.items = await fetch('/path/to/api').then(res => res.json()).then(json => json)
return new Promise((resolve, reject) => {
setTimeout(() => {
this.items = data
resolve()
}, 3000)
})
}
},
template: `
<div id="wrapper">
<label>Search</label>
<input v-model="filter">
<h4 v-if="loading" class="loading">Loading</h4>
<h4 v-else>{{ !!filter ? 'Search Results' : 'Recent Search' }}</h4>
<ul>
<li v-for="(item, index) in search" :key="index">
<p>Product Name: {{ item.product_name }}</p>
<p>Business Name: {{ item.business_name }}</p>
</li>
</ul>
</div>
`
})
#wrapper {
padding: 1rem 5rem;
display: flex;
flex-direction: column;
background-color: rgba(179,229,252,1);
}
.loading:after {
content: ' .';
animation: dots 1s steps(5, end) infinite;}
@keyframes dots {
0%, 20% {
color: rgba(0,0,0,0);
text-shadow:
.25em 0 0 rgba(0,0,0,0),
.5em 0 0 rgba(0,0,0,0);}
40% {
color: black;
text-shadow:
.25em 0 0 rgba(0,0,0,0),
.5em 0 0 rgba(0,0,0,0);}
60% {
text-shadow:
.25em 0 0 black,
.5em 0 0 rgba(0,0,0,0);}
80%, 100% {
text-shadow:
.25em 0 0 black,
.5em 0 0 white;}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>
推荐阅读
- dc.js - 减少未调用的函数
- django - 如何删除 2 个模型之间的一个特定 M2M 关系?
- node.js - 反应原生构建失败
- android - Facebook 广告延迟深度链接在 Instagram 上不起作用,但同样的广告在 Facebook 上运行良好
- reactjs - 当 url 不正确时 React Router 重定向
- c# - 使用 EmguCV 3.1.0.1 从视频捕获中检测
- c++ - C++11中成员函数的值类别属性是什么?
- php - Paypal PHP SDK 付款状态
- python - 尽管 shell 脚本抛出 [Errno 111] 连接被拒绝,但在 Docker 启动时使用 TCP 服务器执行 python3 脚本
- ruby-on-rails - Rails 5.2 是否可以使用路由来分配枚举值?