MSFautocomplete

MSFatuocomate is search input library. When you any item name you will get id and name. Made with pure JavaScript.

Installation

Use npm to install the latest version.

npm i msfautocomplete

import { MSFautocomplete } from 'msfautocomplete';
import 'msfautocomplete/msfautocomplete.css';

Alternatively, you can simply embed it in your HTML file.

<script
  type="module"
  async="false"
  src="https://cdn.jsdelivr.net/gh/minisuperfiles/MSFautocomplete/msfautocomplete.js"
></script>
<link
  href="https://cdn.jsdelivr.net/gh/minisuperfiles/MSFautocomplete/msfautocomplete.css"
  rel="stylesheet"
/>

Using Example

Add references to MSFautocomplete’s JavaScript and Stylesheet.

<script src="msfautocomplete.js" type="module" async="false"></script>
<link rel="stylesheet" href="msfautocomplete.css" />

<input type="text" class="searchbox" name="search" id="search" />

There are two types one is client side search and anthor one is server side search.

server side example

let token =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiI1YTYyMTYyZC1mMjVhLTQ0NWQtYTRhMC05MDBiNjRmNjVhYzciLCJ1c2VybmFtZSI6ImFkbWluIiwiaWF0IjoxNzg0NTY0NzE5LCJleHAiOjE3ODQ1NjgzMTl9.2FfS5vkk9z_u4Jb9GbuIbYfpXvWubmNVF5PsS4G9x7I';
var search = new MSFautocomplate(document.querySelector('#search'), {
  width: '250px',
  height: '45px',
  className: 'form-control',
  onSelected: function (id, name, instance) {
    console.log('ok...', id, name, instance);
  },
  /* severSide is sever side */
  severSide: {
    url: 'http://localhost:3005/api/categories/cat/search',
    headers: [['Authorization', 'Bearer ' + token]],
  },
});

How to handle server request.

Searching data come from qurey format.

Example

http://localhost:3005/api/categories/cat?search=ja

How to handle in database query

where LOWER(cat_name) LIKE LOWER('%${search}%') LIMIT 100```

${search} is varable. It's come from url query requst.

### Response must be like this

```javacript
return { statusCode: 200, data:[
    {id:1, name: 'Java' },
    {id:2, name: 'JavaScript' }
]}

Client side example

var search = new MSFautocomplate(document.querySelector('#search'), {
  width: '250px',
  height: '45px',
  className: 'form-control',
  onSelected: function (id, name, instance) {
    console.log('ok...', id, name, instance);
  },
  /* data list is client side */
  dataList: [
    { id: '1', name: 'Java' },
    { id: '2', name: 'Javascript' },
    { id: '3', name: 'HTML' },
    { id: '4', name: 'CSS' },
    { id: '5', name: 'Pyton' },
  ],
});

Syntax (arguments)

new MSFautocomplate(element, settings)

element = document.getElementById('search')
settings = {
  width: '350px',
  height: '40px',
  className: 'myclass',
  onSelected: function (id, name, instance) {
    console.log('ok...', id, name, instance);
  },
  /* data list is client side */
  dataList: [
    { id: '1', name: 'Java' },
    { id: '2', name: 'Javascript' },
    { id: '3', name: 'HTML' },
    { id: '4', name: 'CSS' },
    { id: '5', name: 'Pyton' },
  ],
  /* Sever side */
  severSide: {
    url: 'http://localhost:3005/api/categories/cat/search',
    headers: [['Authorization', 'Bearer 2FfS5vkk9z_u4Jb9GbuIbYfpXvWubmNVF5PsS4G9x7I']],
  },
}

1. width : It is control of the MSFautocomplate width.
2. height : It is control of the MSFautocomplate height.
3. className : if you need any custom style, give css class name, it will apply to MSFautocomplate.
4. onSelected : When MSFautocomplate is changed this callback function will run. In this function, there are three parameters.
   1. id : you receive item id
   2. name : You get selected item name.
   3. instance : It's instance variable of autocomplate, you can access MSFautocomplate properties and methods
5. getSelectedData : This method uses to get user search data.