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

Posted 2023-02-23

【中文标题】将输入框条目的字符串拆分为单词的子字符串

【英文标题】：Splitting string of input box entry into substring of words

【发布时间】：2019-01-27 21:44:28

【问题描述】：

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

【参考方案1】：

您可以在发送前简单地split() 条款的价值。比如：

const terms = originalterms.split(' ');

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

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