Autocomplete Or Suggestion Box Feature

<!-- In HTML One Input is Required with id attribute & id is used in Javascript Object -->

<input autocomplete="off" type="text" class="TxBxCnAe" placeholder=" " required="" id="SearchCn">

<input autocomplete="off" type="text" class="TxBxCnAe" placeholder=" " required="" id="SearchCnIn">

<input autocomplete="off" type="text" class="TxBxCnAe" placeholder=" " required="" id="SearchCnInDn">

<input autocomplete="off" type="text" class="TxBxCnAe" placeholder=" " required="" id="SearchCnInDnCy">



// id="SearchCnIn" : The input id is used javascript object CT.SnAd({ ItId: 'SearchCnIn' });
document.addEventListener("DOMContentLoaded", function () {
    CT.SnAd({
        TeMnLr: 1,                  // Type Minimum Letter after that suggestion shown
        ItId: 'SearchCnIn',         // Input Id
        URL: '/UI/SearchCn/',       // URL of Source
                                    // Provides Filtered Array of Json Data
                                    // [{ SnItId : "1", SnItTt : "Afghanistan",  SnLtCnTt : "Afghanistan"},
                                    //  { SnItId : "2", SnItTt : "Albania",      SnLtCnTt : "Albania"}],
        URLIdAt:{Conty:"InputId"},  // URLIdArgument - Object of Additional {Argument Name:Id} to be passed.
        ShCy:true,                  // Show Category use only when data source have
                                        "SnLtCyTt" property.
        ClBkFn: AutoSearch,         // Call Back Function on suggestion click.
        SeAy: CountryList           // Source Array use instead Of URl.

        // Following Object Property Are Used For Custom Styling the Suggestion.

        // Passing --SnLtCnTt is mandatory 
        //--SnLtInCs, --SnLtDnTt are mandatory if Icon and description is 
            shown respectively.
        // Suggestion List HTML
        SnLtHTML:`

                        

                            
                        
                        

                            
 ${SnLtCnTt} 
                            
 ${SnLtDnTt} 
                        
                    
`,
        // Suggestion List Category HTML ${groupName} is mandatory.
        SnLtCyHTML:`

                        

                        
 ${groupName} 
                        
                    
`
    });

// Call Back Function on suggestion click
function AutoSearch(e){
    alert('Call Back Function -'+ e.currentTarget.SnItTt);
}

});

// Note: Data Source Format
let CountryList = 
           [{ SnItId: "1", SnItTt: "India", SnLtCyTt: "Asia", SnLtCnTt: "India", SnLtDnTt: "Capital: Delhi", Ot: { Lang1: 'Hindi', Lang2: "English" } },
            { SnItId: "2", SnItTt: "China", SnLtCyTt: "Asia", SnLtCnTt: "China", SnLtDnTt: "Capital: Beijing", Ot: { Lang1: 'Mandarin' } },
            { SnItId: "3", SnItTt: "Japan", SnLtCyTt: "Asia", SnLtCnTt: "Japan", SnLtDnTt: "Capital: Tokyo", Ot: { Lang1: 'Japanese' } }]

//SnItId     stands for Suggestion Input Id, 
//SnItTt     stands for Suggestion Input Text,
//SnLtCyTt   stands for Suggestion List Category Text,
//SnLtCnTt   stands for Suggestion List Caption Text,
//SnLtDnTt   stands for Suggestion List Description Text,
//SnLtInCs   stands for Suggestion List Icon Class,
//Ot         stands for Suggestion Object {Lang1 :'Hindi', Lang2 :"English"},

//All the property listed above when passed from URL can retrieved
//in the CallBack function example Below
function CallBack(e) {
    alert('Call Back Function -'+ e.currentTarget.SnItTt);
}

<div class="TxBxCnAeCr MnTpBm20">
    <select class="TxBxCnAe" placeholder=" " required="" id="Continent" name="SelectedOption">
        <option value="Africa">Africa</option>
        <option value="Antarctica">Antarctica</option>
        <option value="Asia">Asia</option>
        <option value="Europe">Europe</option>
        <option value="North America">North America</option>
        <option value="Oceania">Oceania</option>
        <option value="South America">South America</option>                       
    </select>
    <label class="TxBxCnAeLl">Select Continent</label>
</div>
<div class="TxBxCnAeCr">
    <input autocomplete="off" type="text" class="TxBxCnAe" placeholder=" " required="" id="SearchContinent">
    <label class="TxBxCnAeLl">Type Continent Country Name</label>
</div>


CT.SnAd
        ({
        TeMnLr: 1,//Type Minimum Letter
        ItId: 'SearchContinent',      //Input Id
        ShCy:true,//Show Category
        ClBkFn: AutoSearch, // Call Back Function
        URL: '/UI/SearchContinent/', // URL of Source
        URLAt: {AgContinent:'Continent'}//URL Argument these will create Url as
        //1) `/UI/SearchContinent/?term=${ItId.value}&AgContinent=${Continent.value}`
        //Note: In above URL ItId.value is value of input user typed to see suggestions
        //Note: In above URL Continent.value is value of dropdown continent user selects.
        //2) URLAt can have many arguments like {Ag1Name:'Ag1Id',Ag2Name:'Ag2Id'}
});

<input autocomplete="off" type="text" class="TxBxCnAe" placeholder=" " required="" id="SearchLang">


CT.SnAd({
    TeMnLr: 1,//Type Minimum Letter
    ItId: 'SearchLang',      //Input Id
    ShCy: true,//Show Category
    ClBkFn: GetLang, // Call Back Function
    SeAy: CountryListLang //Source Array
});

<div class="TxBxCnAeCr">
    <input autocomplete="off" type="text" class="TxBxCnAe" placeholder=" " required="" id="SearchCustomStyle">
    <label class="TxBxCnAeLl">Type Asian Country Name</label>
</div>

<div class="TxBxCnAeCr">
    <input autocomplete="off" type="text" class="TxBxCnAe" placeholder=" " required="" id="SearchCustomClass">
    <label class="TxBxCnAeLl">Type Asian Country Name</label>
</div>


CT.SnAd({
    TeMnLr: 1,//Type Minimum Letter
    ItId: 'SearchCustomStyle',      //Input Id
    ShCy: true,//Show Category
    SeAy: CountryListLang, //Source Array
    SnLtHTML: `<div class="DyFx Pg3 BrBm1 CrBrTe20Lt50 HrCrTe BrRs2">
                        <div class="DyFx FxJyCtCr FxAnIsCr FtSe20 PgLtRt5 CrRd">
                            <i class="--Icon" ></i>
                        </div>
                        <div class="DyFx FxDnCn  FxGw1 Pg5">
                                <div class="FtSe18 FtWt600 CrRd"> --Caption </div>
                            <div class="FtSe12"> --Description </div>
                        </div>
                    </div>`,  //Suggestion List Custom HTML
    SnLtCyHTML: `<div class="DyFx Pg3 BrBm1 CrBrTe20Lt50 HrCrTe BrRs2 PnSy CrBdTe PnTp0">
                            <div class="DyFx FxDnCn Pg5 FxGw1">
                                <div class="FtSe18 FtWt600 CrGy "> --Category </div>
                            </div>
                        </div>`
    //Suggestion List Category HTML
});

CT.SnAd({
    TeMnLr: 1,              //Type Minimum Letter
    ItId: 'SearchCustomClass',     //Input Id
    ShCy: true,//Show Category
    URL: '/UI/SearchCnInDnCy/', // URL of Source
    //Provides Filtered Array of Json Data
    // [{ SnItId : "1", SnItTt : "Afghanistan",  SnLtCnTt : "Afghanistan",SnLtInCs : "CT-FilterTriangel"},
    //  { SnItId : "2", SnItTt : "Albania",      SnLtCnTt : "Albania",SnLtInCs : "CT-FilterTriangel"}]
    SnLtCnCs: "FtSe18 FtWt600 CrOe Pg3",
    SnLtCyCs: "FtSe18 FtWt900 HrCrTe CrBdTe BrBm1 CrBrTe20Lt50  BrRs2 Pg10",
    SnLtDnCs: "FtSe16",
});