psk-inputsearch v0.3.8

psk-inputsearch

Input Vue component for search and filtering data in an API or a static list.

• Report bugs: https://github.com/pauloklaus/psk-inputsearch/issues
• Live test: https://pauloklaus.com.br/playground

Install

Create a new vue project:

vue create

Install component and dependencies:

npm install --save bootstrap bootstrap-vue psk-inputsearch

Environment setting

Make a src/resources folder at the root:

mkdir src/resources

Configure the bootstrap

Create the src/resources/bootstrap-vue.js:

import Vue from "vue";
import { BootstrapVue, BootstrapVueIcons } from "bootstrap-vue";

import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";

Vue.use(BootstrapVue);
Vue.use(BootstrapVueIcons);

Configure the psk-inputsearch

Create the src/resources/psk-inputsearch.js:

import Vue from "vue";
import InputSearch from "psk-inputsearch";
import "psk-inputsearch/dist/InputSearch.css";

Vue.use(InputSearch, { InputSearchName: "MyInputSearch" });

Import psk-inputsearch and dependencies

The "src/main.js" file should look like this:

import Vue from "vue";
import App from "./App.vue";

import "./resources/bootstrap-vue";
import "./resources/psk-inputsearch";

Vue.config.productionTip = false;

new Vue({
    render: h => h(App),
}).$mount("#app");

How to use (example in App.vue)

<template>
    <div>
        <p>My Input Search in API
        <br><my-input-search text-field="title" v-model="value" placeholder="Find a product..." :searchMethod="searchInAPI" />
        <br>{{ error }}</p>

        <p>My Input Search in static list
        <br><my-input-search text-field="title" v-model="value" placeholder="Find a person..." :searchMethod="searchInStaticList" /></p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            people: [
                { id: 4, description: "Dennis Ritchie" },
                { id: 3, description: "Grace Hopper" },
                { id: 2, description: "John Backus" },
                { id: 1, description: "John McCarthy" },
                { id: 6, description: "Ken Thompson" },
                { id: 5, description: "Robin Milner" },
            ],
            error: null,
            value: {}
        }
    },
    methods: {
        async searchInApi(term) {
            try {
                const searchResponse = await this.$axios.get("https://fakestoreapi.com/products", { params: { term: term }});
                return Array.isArray(searchResponse.data) ? searchResponse.data : null;
            }
            catch (error) {
                this.$emit("error", error);
            }
            return null;
        },
        searchInStaticList(term) {
            return term ? this.people.filter(item => item.description.toLowerCase().indexOf(term) > -1 ) : this.people;
        }
    }
}
</script>

<style>
* {
    border-radius: 0 !important;
}
input:focus,
button:focus {
    outline: none;
}
</style>

Default JSON format

[
    { id: 1, description: "Test 1" },
    { id: 2, description: "Test 2" }
]

Properties

Instead of informing the CSS classes via property, it is possible to redefine them:

• inputsearch-container
• inputsearch-result
• inputsearch-message
• inputsearch-item
• inputsearch-selected
• inputsearch-item:hover
• inputsearch-selected

Events

Using in the browser

To use directly in the browser, import bootstrap-vue before psk-inputsearch:

<script src="https://unpkg.com/vue-boostrap" />
<script src="https://unpkg.com/psk-inputsearch" />

Thanks

For the support, friendship and knowledge they always share!

• Marlon Dauernheimer, https://github.com/DMarlon
• Álisson Bertochi, https://github.com/gnxbr

Marlon was essential to optimize and simplify the source code.