Ajax Live Search Autocomplete with Javascript Only.

Dev Singh. September 21, 2018 Comments

Now Ajax Live Search make your life easy to implement autocomplete type of search with table format with JSON data or Ajax. Its pure JS.

Download source code from github.

Search (DEMO)

Its easy to use just pass json settings and call init method. Below is the example.

Note : JSON Data source should be associative.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <script type="text/javascript" src="./js/ajax-live-search.min.js"></script>
        <link rel="stylesheet" href="./css/als-style.css"/>
        <script>

            function search(key) {
                var settings = {

                    /**
                     *optional
                     *Pass Ajax URL if data source is from ajax.
                     */
                    ajaxUrl: 'ajax.php?key=' + key,

                    /**
                     *Mandatory
                     *Text field ID where you want to implement autocomplete.
                     */
                    inputId: 'search',

                    /**
                     *optional
                     *No. of rows.
                     */
                    itemsPerPage: 5,

                    /**
                     *optional
                     *No. of length when keyup event fire.
                     */
                    inputLength: 1,

                    /**
                     *optional
                     *Json Field name which you want to put in text field when selected.
                     */
                    inputValue: 'name',

                    /**
                     *optional
                     *Caption Table Head
                     */
                    coloumnHead: 'Name, Class, Roll No.',

                    /**
                     *optional
                     *Fields name from json data which you want to show in table rest fields will hide.
                     */
                    fields: 'name,class,roll',

                    /**
                     *optional
                     *If you have json data in your page no need to pass ajax url.
                     *just pass associative json in data
                     */
                    data: ''
                }

                /**
                 *1st Param : settings
                 *2nd Param : onSelectCallback, it is fired when select on autosuggestion with selected data
                 */
                AjaxLiveSearch.init(settings, function (data) {
                    console.log(data);
                });

            }


        </script>
    </head>
    <body>
        <div>

            <div class="als-cont" style="position: absolute; margin: 50px; padding: 100px;">
                Search
                <input type="text" name="search" id="search" onkeyup="search(this.value)" autocomplete="off" />
            </div>

        </div>
    </body>
</html>

 

  • JavaScript
  • json
  • ajax
  • ajax-live-search
  • autocomplete