This project is manintained by balaji under MIT license

Feel free to ask question on my mail and if you face any bugs. balajiofficialmailme@gmail.com

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

  • LOAD DATA
  • ARRANGE DATA
  • EASY UI

installation

npm install --save advanced_autocomplete

isat_ac(input_element,input_data, function(x,val){ return; }, function(action,cursor,filtered,original_array,is_input_active){ },{ root:"table_id_class", //class or id selector:"TR", //.class or #id tagName(DIV,LIST) }, ['name','id'] );
  • input_element Should be a document.getElementById() or queryselector....etc
  • data Should be a array of object eg showen in example problems....etc
  • filter holds two variable x and val here x is array of single object while loop and val is the value of current input
  • 4th function passing four parameters (action,cursor,filered,original_array,is_input_active) action:this evt triggered while type any key in keyboard -we are getting one of the parameters(begin or any)
    keyboard events triggered while you specific key press up arrow or down arrow or enter key- we are gettting parameter like(up or down or enter)whtat you pressed
    mo events triggered when mouse click-parameter passed by(click)
    cursor return index of clicked dom or current position of index while pressed key
    datait return the filtered data with swap
    data2it return the filered data but it return how you was send data.
    is_input_active we can handle the autocomplete visible or hidden by boolean- it sends the true while input is active otherwise it is false
  • object-root: is a parent id or table id ulelement id
    object-selector: selector helps to find the index of what u clicked or children elements of root parent tagname - If u use table.
    Eg: table children are "TR",you are tagname should be "TR" if you use ul children are "LI",you are tagname should be "LI"
    otherwise use #id or class
  • swap-you can arrange your autocomplete column or remove the specific column or show only specific column-object key should be placed in array
<input type="text" id="ac"> <table id="just_1"> <thead></thead> <tbody id="just_2"> </tbody> </table> Result: <div id="result"> ans</div> var data=[ {id:'1', name:'balaji',edu:'engineer' } {id:'2', name:'sekar',edu:'engineer'}, {id:'2', name:'yokesh',edu:'engineer'}, {id:'3', name:'durai',edu:'engineer'}, {id:'4', name:'gabrie',edu:'engineer'}, {id:'2', name:'Raghu',edu:'engineer'}, {id:'2', name:'Aravind',edu:'engineer'}, {id:'2', name:'deva',edu:'engineer'}, ] isat_ac(document.getElementById("ac"),data, function(x,val){ return x.name.substr(0, val.length).toUpperCase() == val.toUpperCase() }, function(action,cursor,filtered,original_array,is_input_active){ console.log("-----"+action+"------") console.log(filtered) var tbody=document.getElementById("just_2") var result=document.getElementById("result") if(is_input_active){ tbody.style.display=""; //ui tbody.innerHTML=""; var tr_data=[]; tr_data=original_array; for(var i=0;i<tr_data.length;i++) { var tr = document.createElement("tr"); var td_data=tr_data[i]; var text; for(var td_key in td_data){ var td = document.createElement("td"); text=document.createTextNode(td_data[td_key]); td.appendChild(text) tr.appendChild(td) } tbody.appendChild(tr); //ui } var trs=tbody.getElementsByTagName("tr"); console.log("cursor"+trs.length) //keyboard if(cursor!=-1){ trs[cursor].style.background="red"; } if(action=="enter"){ result.innerHTML=filtered[cursor].name; } //mouse if(action=="click"&&cursor!=-1){ trs[cursor].style.background="red"; //filltered result.innerHTML=(filtered[cursor]); } // result }else{ cursor=-1; tbody.style.display="none"; } },{ root:"just_2", //class or id selector:"TR", //.class or #id tagName(DIV,LIST) }, ['name','id'] );
Result:
ans

LIST

function(x,val){ return x.name.substr(0, val.length).toUpperCase() == val.toUpperCase() }, [] <input type="text" id="ul_input"> <ul id="Just_2_ul" style="list-style-type: none;background:pink;margin:0;padding:0"> </ul> var data=[ {id:'1', name:'balaji',edu:'engineer' }, {id:'2', name:'sekar',edu:'eng'}, {id:'3', name:'yokesh',edu:'engineer'}, {id:'4', name:'durai',edu:'eng'}, {id:'5', name:'gabrie',edu:'eng'}, {id:'6', name:'Raghu',edu:'engineer'}, {id:'7', name:'Aravind',edu:'eng'}, {id:'8', name:'Deva',edu:'engineer'}, ] isat_ac(document.getElementById("ul_input"),data, function(x,val){ return x.name.substr(0, val.length).toUpperCase() == val.toUpperCase() }, function(action,cursor,filtered,original_array,is_input_active){ console.log("-----"+action+"->"+cursor+"-----") console.log(filtered) var ul=document.getElementById("Just_2_ul") var lis=ul.getElementsByTagName("li"); if(action=="click"){ lis[cursor].style.background="red"; document.getElementById("ul_input").value=filtered[cursor].name; ul.style.display="none"; } if(is_input_active){ ul.style.display=""; ul.innerHTML=""; var ul_data=[]; ul_data=original_array; for(var i=0;i<ul_data.length;i++) { var li = document.createElement("li"); var li_data=ul_data[i]; var text; text=document.createTextNode(li_data["name"]); console.log("li"+li_data["name"]) li.appendChild(text) ul.appendChild(li); } if(action=="enter"){ document.getElementById("ul_input").value=filtered[cursor].name; ul.style.display="none"; } if(cursor!=-1){ lis[cursor].style.background="red";} }else{ cursor=-1; } },{ root:"Just_2_ul", //class or id selector:"LI", //.class or #id tagName(DIV,LIST) }, [] );

Basic Eg:1

Notes:
  • Empty fillter
  • empty swap
  • Events and Actions
function(x,val){ return; } [] <input type="text" id="ex-1"> <table id="ex-1_table"> <thead></thead> <tbody id="ex-2_table"> </tbody> </table> Result: input:<div id="ex-1_data"> </div> input:<div id="ex-1_input"> </div> action:<div id="ex_1_action"></div> cursor:<div id="ex_1_cursor"></div> var data=[ {id:'1', name:'balaji',edu:'engineer' }, {id:'2', name:'sekar',edu:'eng'}, {id:'3', name:'yokesh',edu:'engineer'}, {id:'4', name:'durai',edu:'eng'}, {id:'5', name:'gabrie',edu:'eng'}, {id:'6', name:'Raghu',edu:'engineer'}, {id:'7', name:'Aravind',edu:'eng'}, {id:'8', name:'Deva',edu:'engineer'}, ] isat_ac(document.getElementById("ex-1"),data, function(x,val){ return; }, function(action,cursor,filtered,original_array,is_input_active){ document.getElementById("ex-1_data").innerHTML=JSON.stringify(filtered); document.getElementById("ex-1_input").innerHTML="input: "+is_input_active; document.getElementById("ex-1_action").innerHTML="action: "+action; document.getElementById("ex-1_cursor").innerHTML="cursor: "+cursor; },{ root:"ex-1_table", //class or id selector:"TR", //.class or #id tagName(DIV,LIST) }, [] );
Result:

Basics eg:2

Notes:
  • with filter(only name)
  • with swap

filter

function(x,val){ return x.name.substr(0, val.length).toUpperCase() == val.toUpperCase() },

swap

['name','edu','id'] <!-- code editor end --> <input type="text" id="ex-2"> <table id="ex-2_table"> <thead></thead> <tbody id="ex-3_table"> </tbody> </table> Result: <div id="ex-2_data"> </div> <div id="ex-2_input"> </div> <div id="ex-2_action"></div> <div id="ex-2_cursor"></div> var data=[ {id:'1', name:'balaji',edu:'engineer' }, {id:'2', name:'sekar',edu:'eng'}, {id:'3', name:'yokesh',edu:'engineer'}, {id:'4', name:'durai',edu:'eng'}, {id:'5', name:'gabrie',edu:'eng'}, {id:'6', name:'Raghu',edu:'engineer'}, {id:'7', name:'Aravind',edu:'eng'}, {id:'8', name:'Deva',edu:'engineer'}, ] isat_ac(document.getElementById("ex-2"),data, function(x,val){ return x.name.substr(0, val.length).toUpperCase() == val.toUpperCase() }, function(action,cursor,filtered,original_array,is_input_active){ document.getElementById("ex-2_data").innerHTML=JSON.stringify(filtered); document.getElementById("ex-2_input").innerHTML="input: "+is_input_active; document.getElementById("ex-2_action").innerHTML="action: "+action; document.getElementById("ex-2_cursor").innerHTML="cursor: "+cursor; },{ root:"ex-1_table", //class or id selector:"TR", //.class or #id tagName(DIV,LIST) }, ['name','edu','id'] );
Result:

Basics eg:3

Notes:
  • with filter(multiple filter name,edu)
  • with swap

Multiple filter

function(x,val){ return x.name.substr(0, val.length).toUpperCase() == val.toUpperCase() || x.edu.substr(0, val.length).toUpperCase() == val.toUpperCase() },

swap

['name','edu','id']

Swap(not applied below example)

you can also remove unwanted data form the array of object ['name','edu'] <!-- code editor end --> <input type="text" id="ex-3"> <table id="ex-3_table"> <thead></thead> <tbody id="ex-4_table"> </tbody> </table> Result: <div id="ex-3_data"> </div> <div id="ex-3_input"> </div> <div id="ex-3_action"></div> <div id="ex-3_cursor"></div> var data=[ {id:'1', name:'balaji',edu:'engineer' }, {id:'2', name:'sekar',edu:'eng'}, {id:'3', name:'yokesh',edu:'engineer'}, {id:'4', name:'durai',edu:'eng'}, {id:'5', name:'gabrie',edu:'eng'}, {id:'6', name:'Raghu',edu:'engineer'}, {id:'7', name:'Aravind',edu:'eng'}, {id:'8', name:'Deva',edu:'engineer'}, ] isat_ac(document.getElementById("ex-3"),data, function(x,val){ return x.name.substr(0, val.length).toUpperCase() == val.toUpperCase() || x.edu.substr(0, val.length).toUpperCase() == val.toUpperCase() }, function(action,cursor,filtered,original_array,is_input_active){ document.getElementById("ex-3_data").innerHTML=JSON.stringify(filtered); document.getElementById("ex-3_input").innerHTML="input: "+is_input_active; document.getElementById("ex-3_action").innerHTML="action: "+action; document.getElementById("ex-3_cursor").innerHTML="cursor: "+cursor; },{ root:"ex-3_table", //class or id selector:"TR", //.class or #id tagName(DIV,LIST) }, ['name','edu','id'] );
Result: