Skip to content

Latest commit

 

History

History
205 lines (159 loc) · 5.53 KB

README.md

File metadata and controls

205 lines (159 loc) · 5.53 KB
Raw

psk-inputsearch

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

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 was essential to optimize and simplify the source code.