我正在使用Vue进行基本搜索,该搜索将在搜索框中输入的关键字发布到CloudSearch,Cloudsearch将JSON返回到Vue,然后显示它。但是,我不想将每个单词分解成一个子字符串并发送terms: ["my keyword search"]
,而不是发送terms: ["my", "keyword", "search"]
。我什至不知道从哪里开始。任何帮助将不胜感激。
这是包含我的搜索框的组件:
<template>
<input type="search" class="form-control form-control-lg w-auto py-2 py-md-3 px-3 px-md-4 border-0 rounded" v-model="searchTerm" placeholder="For example, Harvard, Biology, or New York" :name="name">
</template>
<script>
export default {
props: {
value: {
default: ''
},
name: {
default: ''
}
},
data: function () {
return {searchTerm: this.value}
},
watch: {
value: function (val) {
this.searchTerm = val
},
searchTerm: function (val) {
this.$emit('input', val)
}
}
}
</script>
这是我的主要App文件(请注意通过axios发布条款的方法:
<template>
<div class="app search">
<!-- Search header -->
<header id="searchHeader" class="search--header py-2 py-md-4">
<div class="container">
<div class="input-group">
<!-- Type filter -->
<TypeFilter v-model="type"/>
<!-- Location filter -->
<!--<LocationFilter />-->
<!-- Search box -->
<SearchBox v-model="searchTerm"/>
<!-- More filters -->
<!--<div class="dropdown checkbox-dropdown mx-2">
<button class="btn btn-lg btn-white py-3 px-4 dropdown-toggle" type="button" id="dropdownMenuButtonFilters" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">More Filters</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButtonFilters">
</div>
</div>-->
<!-- Search button -->
<button v-on:click="searchSubmit(searchTerm)" class="btn btn-lg btn-white ml-2 px-4 search-submit">Search</button>
</div>
<!-- Active filters (hidden for v0) -->
<!--<div class="search--header--filters mt-3">
<span class="badge">Filter</span>
<span class="badge">Filter</span>
<span class="badge">Filter</span>
</div>-->
</div>
</header>
<!-- Main results -->
<div class="container">
<!-- Result count and show/sort -->
<ResultCount v-model="page" :items="schools.length" :perPage="10"/>
<!-- Results -->
<SchoolList :schools="pageOfSchools"/>
<!-- Pagination -->
<Pagination v-model="page" :items="schools.length" :perPage="10"/>
</div>
</div>
</template>
<script>
import SchoolList from './SchoolList'
import ResultCount from './ResultCount'
import Pagination from './Pagination'
import SearchBox from './SearchBox'
import TypeFilter from "./TypeFilter";
import LocationFilter from "./LocationFilter";
import getArraySection from '../utilities/get-array-section'
//import {schools as schoolData} from '../data'
export default {
name: 'app',
components: {SchoolList, ResultCount, Pagination, SearchBox, TypeFilter, LocationFilter},
data: () => ({
searchTerm: '',
type: '',
schools: [],
page: 1,
}),
computed: {
pageOfSchools: function () {
return getArraySection(this.schools, this.page, 10)
}
},
watch: {
/*searchTerm: function () {
this.filterSchools()
},
type: function () {
this.filterSchools()
}*/
},
methods: {
searchSubmit: function(terms) {
axios.post("/search/college", {
"search": {
terms: [terms]
}
})
.then(response => {
this.schools = response.data.hit
console.log(response.data)
})
},
filterSchools: function () {
const searchTerm = this.searchTerm.toLowerCase()
const type = this.type
//let result = schoolData
if (searchTerm) {
result = result.filter(school => {
return (
school.title.toLowerCase().search(searchTerm) >= 0 ||
school.location.toLowerCase().search(searchTerm) >= 0
)
})
}
if (type) {
result = result.filter(school => school.type.indexOf(type) >= 0)
}
this.schools = result
this.page = 1
}
},
created: function () {
this.filterSchools()
}
}
</script>
最佳答案
您可以在发送前简单地split()
条款的值。就像是:const terms = originalterms.split(' ');
或者,如果origianl源确实是一个数组const terms = originalterms[0].split(' ');
关于javascript - 将输入框条目的字符串拆分为单词的子字符串,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/51953149/