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

Property	Description	Required	Default
searchMethod	Method to start search and return a filtered array. Has a term parameter with the typed text.	yes
inputId	html id to the input element	no	random id
autofocus	Focus on load page	no	false
disabled	To disable user input	no	false
debouce	Time to start the search when the user stops typing	no	500
placeholder	Text to display when the input is empty	no	null
description	Explanation of use, displayed discreetly below the input	no	null
idField	JSON id field	no	id
textField	JSON field with description to display in the input when a list item is selected	no	description
customText	Function to customize text to display in the input	no	null
customFormatResult	Function to customize the result object	no	null
value	Value (an object like this { id: 1, descript: "Test 1" }) to bind selection	no	null
showActionButton	Display a button at the end of the input	no	false
actionButtonIcon	Action button icon (from https://bootstrap-vue.org/docs/icons)	no	box-arrow-up-right
buttonVariant	Variant bootstrap color to the button: primary, secondary, success, warning, danger, info, light, dark	no	null
waitingText	Text to display while searching	no	Searching...
notFoundText	Text to display when nothing was found	no	Not found.
containerClass	Class of container div	no	-
resultClass	Class of result div	no	-
messageClass	Class of "searching" message	no	-
itemClass	Class of item	no	-
selectedClass	Class of selected item	no	-

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

Event	Description
change	When there is change
keydown	When a key is pressed
actionButtonClick	When a button is clicked

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.