Pan Propan

<script type="text/javascript">

        var app = new Vue({
        delimiters: ['[[', ']]'],
        el: '#main',
        data () {
            return {
            medicines: [],
            searchText: ''
            }
        },
        methods: {
            searchEvent ({ type, target }) {
            if (target.value.length > 3) {
                document.getElementById('searchResult').style.display = 'block  '
                var textStr = target.value
                axios.get("/search?q=" + textStr.toUpperCase())
                .then(response => {
                    this.medicines = response.data
                })
                .catch(e => {
                    this.errors.push(e)
                })
            } else {
                document.getElementById('searchResult').style.display = 'none'
            }
            }
        }
    })
        
    </script>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>