Skip to content

Latest commit

 

History

History
195 lines (177 loc) · 9.17 KB

README.md

File metadata and controls

195 lines (177 loc) · 9.17 KB
Raw

Javascript Autocomplete

Autocomplete snippet for HTML input fields built with native javascript

This snippet:

  • 🔥 is built with native javascript
  • 📦 requires no dependencies
  • 🖇️ can be used with OR without AJAX
  • ⚒️ highy customizable yet very simple
  • 😍 user experience is inspired from Google search

Demo

Usage

Add either unminified or minified JS onto your html

<script src="/js/autocomplete.js"></script>
<!-- minififed -->
<script src="/js/autocomplete.min.js"></script>

Add either unminified or minified CSS onto your html. You can omit the "theme" if you do not want any UI styling as in examples

<link rel="stylesheet" href="/css/autocomplete.css">
<link rel="stylesheet" href="/css/autocomplete-theme.css">
<!-- minififed -->
<link rel="stylesheet" href="/css/autocomplete.min.css">
<link rel="stylesheet" href="/css/autocomplete-theme.min.css">

CDN

You can also use below CDN links. Feel free to change version number with respect to the releases

<script src="https://cdn.jsdelivr.net/gh/giray123/[email protected]/js/autocomplete.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/giray123/[email protected]/css/autocomplete.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/giray123/[email protected]/css/autocomplete-theme.css">
<!-- minififed -->
<script src="https://cdn.jsdelivr.net/gh/giray123/[email protected]/js/autocomplete.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/giray123/[email protected]/css/autocomplete.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/giray123/[email protected]/css/autocomplete-theme.min.css">

Initialize Autocomplete object with your configurations

Without AJAX

var autocomplete = new Autocomplete({
    selector: "#search_wihtout_ajax",
    minChar: 1,
    delay: 100,
    list: ['apple', 'applepie', 'abacus', 'grape', 'watermelon', 'cherry'],
    submitHandler: function(str){
        console.log("Searched: "+str)
    }
})

Without AJAX + Custom Search Function

var autocomplete = new Autocomplete({
    selector: "#search_wihtout_ajax_custom_search",
    minChar: 1,
    delay: 100,
    list: ['apple', 'applepie', 'abacus', 'grape', 'watermelon', 'cherry'],
    customSearch: function(value, list){
        var regexp = new RegExp(value.toLowerCase().trim())
        var results = list.filter(v=>regexp.test(v)).sort()
        return results
    },
    submitHandler: function(str){
        console.log("Searched: "+str)
    }
})

With AJAX + Builtin XMLHttpRequest Request

var autocomplete = new Autocomplete({
    selector: "#search_auto_ajax",
    minChar: 1,
    maxListHeight: 400,
    ajax: {
        method: "GET",
        url: "https://kitsu.io/api/edge/anime",
        withCredentials: false,
        fields: "?fields[anime]=titles&page[limit]=10&filter[text]",
        responseHandler: function(response){
            var array = JSON.parse(response).data
                            .map(v=>v.attributes.titles.en || v.attributes.titles.en_jp)
                            .filter(v=>v) // remove false/undefined values
            console.log(array, 'array')
            return array
        },
    },
    beforeAjax : function(search){
        return search.toLowerCase()
    },
    submitHandler: function(str){
        console.log("Searched: "+str)
    }
})

With AJAX + Custom AJAX Handler

var autocomplete = new Autocomplete({
    selector: "#search_manual_ajax",
    minChar: 1,
    manualAjax: function(value){
        // you need to return a promise here
        // feel free to use any AJAX library you want
        return new Promise(function(resolve, reject){
            var request = new XMLHttpRequest();
            request.open('GET', 'https://kitsu.io/api/edge/anime?fields[anime]=titles&page[limit]=10&filter[text]='+value, true);
            request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
            request.onreadystatechange = function() {
                if (this.readyState == XMLHttpRequest.DONE && this.status == 200) {
                    console.log('succeed');
                    console.log(request.responseText);
                    var array = JSON.parse(request.responseText).data.map(v=>v.attributes.titles.en || v.attributes.titles.en_jp)
                    resolve(array)
                }else{
                    console.log('server error');
                }
            };
            request.onerror = function(e) {
                console.log('something went wrong');
                reject(e)
            };
            request.send();
        })
    },
    beforeAjax : function(search){
        return search.toLowerCase()
    },
    submitHandler: function(str){
        console.log("Searched: "+str)
    }
})

Configuration

Global Options

attribute type default description
selector string required html input element query selector (document.querySelector(selector))
minChar integer 0 minimum number of letters for search to start
delay integer 500 milliseconds after which search starts if there is no other input by the user
list array optional array of strings to search for. This automatically disables AJAX calls.
customSearch function optional if list is provided, this will override the default list search function. Default search function trims and lowercases the input and makes a simple regex search ("^"+search.toLowerCase().trim()+".*$") on the list. It sorts the filtered values at the end.
extraParentClasses string optional any additional classes for the wrapper element
ajax object optional configuration object in case of using built-in XMLHttpRequest AJAX requests. Object attributes are listed below.
beforeAjax function optional this function manipulates the user input before search starts. For example, you can make the input lowercase
manualAjax function optional this function is for a custom AJAX function istead of the built-in XMLHttpRequest. It should return a promise. Please see the example.
submitHandler function required this function defines what to do when user submits an input after autocomplete, presses enter on any autocomplete suggestion etc.
highlight boolean true when enabled, autocomplete list will highligh search string on autocomplete rows

Built-in XMLHttpRequest Ajax Options

attribute type default description
ajax.method string "GET" built-in XMLHttpRequest AJAX method
ajax.url url required built-in XMLHttpRequest AJAX method
ajax.withCredentials boolean false whether to send credentials with built-in XMLHttpRequest AJAX
ajax.fields object "?search=" query parameters to append to url
ajax.responseHandler object optional when AJAX returns any response this function is used to manipulate the response. It must return an array of strings.

Methods

attribute description
context() returns information about the current state
focus() focuses the input element
value() changes the value of the input element

Mobile Friendliness

Screen sizes below 768px also display arrows on suggestion list so that users could tap and copy the value onto the search field without submitting a value.

LICENSE

This project is licensed under the terms of the MIT license.