Custom Data Types vs. 1.1.0 Full+Lite

By default, the ng.AutoComplete component includes three pre-defined data types; "self", "array" and "remote". In this document, we'll show you how to create your own data type and search function.

Adding New Data Type

Each data type is unique, which means you can only have one method to process the "array" data type. These functions can be overwritten if needed. Let's say we have an array that's being update regularly by another function and we want to use this array for the auto complete results. If the default search functionality is the standard, we can simply use the ng.AutoComplete.set_src every time the array changes. However, we have our own search function. So, we'll create a new data type called "live_array". To add the live_array to the ng.AutoComplete class (without creating a new class), we can simply extend it's prototype with the new function.

Each data type has a matching data processing method named [DATA NAME]_fill_data. So, to create the "live_array" data type, we will add the "live_array_fill_data" method into the ng.AutoComplete prototype.
ng.extend_proto(ng.AutoComplete, {
    live_array_fill_data: function(){
        // to get the user input, we'll use the
        // pre-defined around caret text function
        // which returns an array of text before the caret
        // and after the caret.
        var txt_arr = this.get_txt_around_caret();
        
        // or we can use this.get_input().value
        // to get the complete text
        
        // now we'll create our return array
        var re_arr = [];
        
        // we search our live array for matching results
        // using a loop, assuming it's called g_live_array
        for (var i=0; i<g_live_array.length; i++){
            // if search match, we'll add the value to
            // the return array
            if (this.my_search_func(txt_arr, g_live_array[i])){ 
                re_arr.push ({
                    value: 'my_live_value',
                    text: 'my_live_text',
                    html: '<strong>my live html</strong>'
                    //, group: 'My Group' // this will be on top of the options
                });
            }
        }
        
        // and finally return the result
        return re_arr;
    },
    
    // custom search function
    my_search_func: function(val, cur){
        // check if the value matches the array
        // current index and return boolean
        // in this example, we'll always return true
        return true;
    }
});

Remote Data

If the data source is "remote", we can simply add the option remote_output_process which is a function that will process the remote results text.

API Menu