将输入框条目的字符串拆分为单词的子字符串

Question

我正在使用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>

Answer 1

您可以在发送之前简单地split()条款的价值。像这样：

const terms = originalterms.split(' ');

或者，如果origianl源确实是一个数组

const terms = originalterms[0].split(' ');