Created
October 16, 2017 17:07
-
-
Save ayubk/c202f9b2f28b6616cdc022b7fe936886 to your computer and use it in GitHub Desktop.
Dropdown Mneu in Pure Vanilla JS // source http://jsbin.com/joferuv
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>Dropdown Mneu in Pure Vanilla JS</title> | |
| <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> | |
| <style id="jsbin-css"> | |
| .dropDownMenu{ | |
| position:absolute; | |
| background:#ddd; | |
| padding:15px; | |
| margin: 1px 2px; | |
| min-width:250px; | |
| max-height:400px; | |
| overflow:auto; | |
| box-shadow:1px 1px 15px; | |
| border-radius:4px; | |
| display:none; | |
| z-index:501; | |
| } | |
| .dropDownItem,ul{list-style:none;padding:3px;} | |
| .dropDownItem:hover{ | |
| color:white; | |
| background-color:#00eebb; | |
| } | |
| .close {position:absolute;top:1px;right:1px;color:yellow;background:red;padding:0 5px;} | |
| hr{margin-bottom:3px;margin-top:3px;} | |
| </style> | |
| </head> | |
| <body> | |
| <div class="w3-section"> | |
| <div id="mNameDiv" | |
| class="w3-container w3-border w3-padding"> | |
| <input name="mName" id="mName" | |
| type="text" class="akInput" | |
| selected="" | |
| placeholder="Select Name ..." /> | |
| </div> | |
| </div> | |
| <!-- The selected attribute will contain the keyField value --> | |
| <script id="jsbin-javascript"> | |
| function menuItemSelected(id,key,val,ddm,CB){ | |
| var daId='',sto; | |
| daId = document.querySelector(id); //document.getElementById(id); | |
| daId.value=val; //save vale to input field | |
| daId.setAttribute("selected",key); | |
| if(CB && typeof CB === "function"){ | |
| CB(document.querySelector(id),id,val); | |
| } | |
| document.getElementById(ddm).style.display="none"; | |
| } | |
| //--- calling a callback function on mouse enter | |
| function ddMenuMouseEnter(slctor,ths,ky,CB){ | |
| var aFn= document.querySelector(slctor); | |
| aFn=aFn.parentNode.getAttribute("do"); | |
| aFn && window[aFn](ky); | |
| // the func name as string attribute | |
| } | |
| //------------------ | |
| function akDropDown(opts){ | |
| var str,ddMenuId,htm='',ddMenu='',data=[], cntnr,elInput='', | |
| slctor='',listData=[], menuItems,CB,ttle,key, qry2,displayStr='',dLen=0,searchStr; | |
| if(!opts.formDivID || !opts.inputID){ | |
| console.log("ERROR! Must pass formDivID and inputID"); | |
| return; | |
| } | |
| cntnr=''; //holds menu container Obj | |
| // selector for the input element, input container div ID and the input element ID | |
| slctor='#'+opts.formDivID+' #'+opts.inputID; | |
| menuItems= opts.rows || 5; // number of items to show in menu | |
| CB = opts.callBack || "null"; // the callBack | |
| listData=opts.listData; // the data list | |
| ttle= opts.displayData || null; //the diplay field name | |
| key=opts.keyField || null; | |
| if(!key || !ttle){ | |
| console.log("ERROR! Must pass keyField and displayData"); | |
| return; | |
| } | |
| displayStr = opts.displayStr || listData[ttle]; | |
| searchStr = opts.searchStr || null; | |
| cntnr=document.getElementById(opts.formDivID); //the container Div | |
| elInput= cntnr.querySelector(slctor); | |
| elInput.autocomplete="off"; // no messing up | |
| //------ if already exists else create new | |
| if(document.body.contains(document.getElementById(opts.formDivID+"ddm"))) { | |
| ddMenu=document.getElementById(opts.formDivID+"ddm"); //.remove(); | |
| }else{ ddMenu = document.createElement('div'); ddMenu.id=opts.formDivID+"ddm";cntnr.appendChild(ddMenu); } | |
| ddMenu.className="dropDownMenu "; | |
| ddMenuId=opts.formDivID+"ddm"; | |
| elInput.onkeyup = function(ev){ // key handler | |
| ddMenu.style.display='block'; | |
| str = this.value; //the entered value; | |
| if(str){ | |
| str=str.toString().toLowerCase(); | |
| data = listData.filter(function(item){ | |
| if(item[ttle]){ | |
| if(searchStr && searchStr!==''){ | |
| qry2 = eval(searchStr).toString().toLowerCase(); | |
| }else{ | |
| qry2 = item[key]+item[ttle].toString().toLowerCase(); // key and display item; | |
| } | |
| return qry2.indexOf(str) !== -1; | |
| }else{return false;} | |
| }); | |
| } | |
| // menu body | |
| dLen = data.length>menuItems?menuItems:data.length; | |
| htm='<div class="close" onclick="elHide(this.parentNode.id)">x</div><ul>'; | |
| for(var i=0;i<dLen;i++){ | |
| htm+='<li class="dropDownItem" id="'+data[i][key]+ | |
| '" onclick="menuItemSelected(\''+slctor+'\',this.id,\''+data[i][ttle]+'\',\'' | |
| +ddMenuId+'\','+CB+')"'+'onmouseenter="ddMenuMouseEnter(\'' | |
| +slctor+'\',\''+data[i][ttle]+'\',this.id,'+CB+')">'+eval(displayStr)+'</li>'; | |
| } | |
| htm+='</ul>'; | |
| ddMenu.innerHTML=htm; | |
| }; | |
| } | |
| function elHide(id){ | |
| document.getElementById(id).style.display="none"; | |
| } | |
| //akDropDown(opts); | |
| //------------------ | |
| var clients=[ | |
| {mAcNo:1,mName:"Amir Khan",mCity:"Karachi",mSales:12000}, | |
| {mAcNo:2,mName:"Sanjay",mCity:"Bombay",mSales:10000}, | |
| {mAcNo:3,mName:"John Desoza",mCity:"Delhi",mSales:11500}, | |
| {mAcNo:4,mName:"Aftab Sing",mCity:"London",mSales:12400}, | |
| {mAcNo:5,mName:"Bill Tate",mCity:"New York",mSales:12300}, | |
| {mAcNo:6,mName:"Nokia Bill",mCity:"Ghana",mSales:11250}, | |
| {mAcNo:7,mName:"Chow King",mCity:"Hong Kong",mSales:13000} | |
| ]; | |
| var clientDisplayStr = "'<div class=\"w3-card-2 w3-white\"><span class=\"w3-green w3-block\">'+data[i]['mName']+'</span><span class=\"w3-block\"> City: '+ data[i]['mCity']+'</span><span class=\" w3-block\"> Sales: '+ data[i]['mSales']+'</span></div><hr>'", | |
| clientSearchStr = "item.mAcNo+item.mName+item.mCity+item.mSales"; | |
| var optsClient = { | |
| formDivID:"mNameDiv", | |
| inputID:"mName", | |
| listData:null, // data Objects array | |
| displayData:"mName", | |
| keyField:"mAcNo", | |
| rows:5, // number of menu rows/ietms | |
| callBack:null, | |
| displayStr: clientDisplayStr, | |
| searchStr: clientSearchStr | |
| }; | |
| // call and set | |
| optsClient.listData = clients; | |
| akDropDown(optsClient); | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">.dropDownMenu{ | |
| position:absolute; | |
| background:#ddd; | |
| padding:15px; | |
| margin: 1px 2px; | |
| min-width:250px; | |
| max-height:400px; | |
| overflow:auto; | |
| box-shadow:1px 1px 15px; | |
| border-radius:4px; | |
| display:none; | |
| z-index:501; | |
| } | |
| .dropDownItem,ul{list-style:none;padding:3px;} | |
| .dropDownItem:hover{ | |
| color:white; | |
| background-color:#00eebb; | |
| } | |
| .close {position:absolute;top:1px;right:1px;color:yellow;background:red;padding:0 5px;} | |
| hr{margin-bottom:3px;margin-top:3px;} | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">function menuItemSelected(id,key,val,ddm,CB){ | |
| var daId='',sto; | |
| daId = document.querySelector(id); //document.getElementById(id); | |
| daId.value=val; //save vale to input field | |
| daId.setAttribute("selected",key); | |
| if(CB && typeof CB === "function"){ | |
| CB(document.querySelector(id),id,val); | |
| } | |
| document.getElementById(ddm).style.display="none"; | |
| } | |
| //--- calling a callback function on mouse enter | |
| function ddMenuMouseEnter(slctor,ths,ky,CB){ | |
| var aFn= document.querySelector(slctor); | |
| aFn=aFn.parentNode.getAttribute("do"); | |
| aFn && window[aFn](ky); | |
| // the func name as string attribute | |
| } | |
| //------------------ | |
| function akDropDown(opts){ | |
| var str,ddMenuId,htm='',ddMenu='',data=[], cntnr,elInput='', | |
| slctor='',listData=[], menuItems,CB,ttle,key, qry2,displayStr='',dLen=0,searchStr; | |
| if(!opts.formDivID || !opts.inputID){ | |
| console.log("ERROR! Must pass formDivID and inputID"); | |
| return; | |
| } | |
| cntnr=''; //holds menu container Obj | |
| // selector for the input element, input container div ID and the input element ID | |
| slctor='#'+opts.formDivID+' #'+opts.inputID; | |
| menuItems= opts.rows || 5; // number of items to show in menu | |
| CB = opts.callBack || "null"; // the callBack | |
| listData=opts.listData; // the data list | |
| ttle= opts.displayData || null; //the diplay field name | |
| key=opts.keyField || null; | |
| if(!key || !ttle){ | |
| console.log("ERROR! Must pass keyField and displayData"); | |
| return; | |
| } | |
| displayStr = opts.displayStr || listData[ttle]; | |
| searchStr = opts.searchStr || null; | |
| cntnr=document.getElementById(opts.formDivID); //the container Div | |
| elInput= cntnr.querySelector(slctor); | |
| elInput.autocomplete="off"; // no messing up | |
| //------ if already exists else create new | |
| if(document.body.contains(document.getElementById(opts.formDivID+"ddm"))) { | |
| ddMenu=document.getElementById(opts.formDivID+"ddm"); //.remove(); | |
| }else{ ddMenu = document.createElement('div'); ddMenu.id=opts.formDivID+"ddm";cntnr.appendChild(ddMenu); } | |
| ddMenu.className="dropDownMenu "; | |
| ddMenuId=opts.formDivID+"ddm"; | |
| elInput.onkeyup = function(ev){ // key handler | |
| ddMenu.style.display='block'; | |
| str = this.value; //the entered value; | |
| if(str){ | |
| str=str.toString().toLowerCase(); | |
| data = listData.filter(function(item){ | |
| if(item[ttle]){ | |
| if(searchStr && searchStr!==''){ | |
| qry2 = eval(searchStr).toString().toLowerCase(); | |
| }else{ | |
| qry2 = item[key]+item[ttle].toString().toLowerCase(); // key and display item; | |
| } | |
| return qry2.indexOf(str) !== -1; | |
| }else{return false;} | |
| }); | |
| } | |
| // menu body | |
| dLen = data.length>menuItems?menuItems:data.length; | |
| htm='<div class="close" onclick="elHide(this.parentNode.id)">x</div><ul>'; | |
| for(var i=0;i<dLen;i++){ | |
| htm+='<li class="dropDownItem" id="'+data[i][key]+ | |
| '" onclick="menuItemSelected(\''+slctor+'\',this.id,\''+data[i][ttle]+'\',\'' | |
| +ddMenuId+'\','+CB+')"'+'onmouseenter="ddMenuMouseEnter(\'' | |
| +slctor+'\',\''+data[i][ttle]+'\',this.id,'+CB+')">'+eval(displayStr)+'</li>'; | |
| } | |
| htm+='</ul>'; | |
| ddMenu.innerHTML=htm; | |
| }; | |
| } | |
| function elHide(id){ | |
| document.getElementById(id).style.display="none"; | |
| } | |
| //akDropDown(opts); | |
| //------------------ | |
| var clients=[ | |
| {mAcNo:1,mName:"Amir Khan",mCity:"Karachi",mSales:12000}, | |
| {mAcNo:2,mName:"Sanjay",mCity:"Bombay",mSales:10000}, | |
| {mAcNo:3,mName:"John Desoza",mCity:"Delhi",mSales:11500}, | |
| {mAcNo:4,mName:"Aftab Sing",mCity:"London",mSales:12400}, | |
| {mAcNo:5,mName:"Bill Tate",mCity:"New York",mSales:12300}, | |
| {mAcNo:6,mName:"Nokia Bill",mCity:"Ghana",mSales:11250}, | |
| {mAcNo:7,mName:"Chow King",mCity:"Hong Kong",mSales:13000} | |
| ]; | |
| var clientDisplayStr = "'<div class=\"w3-card-2 w3-white\"><span class=\"w3-green w3-block\">'+data[i]['mName']+'</span><span class=\"w3-block\"> City: '+ data[i]['mCity']+'</span><span class=\" w3-block\"> Sales: '+ data[i]['mSales']+'</span></div><hr>'", | |
| clientSearchStr = "item.mAcNo+item.mName+item.mCity+item.mSales"; | |
| var optsClient = { | |
| formDivID:"mNameDiv", | |
| inputID:"mName", | |
| listData:null, // data Objects array | |
| displayData:"mName", | |
| keyField:"mAcNo", | |
| rows:5, // number of menu rows/ietms | |
| callBack:null, | |
| displayStr: clientDisplayStr, | |
| searchStr: clientSearchStr | |
| }; | |
| // call and set | |
| optsClient.listData = clients; | |
| akDropDown(optsClient); | |
| </script></body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .dropDownMenu{ | |
| position:absolute; | |
| background:#ddd; | |
| padding:15px; | |
| margin: 1px 2px; | |
| min-width:250px; | |
| max-height:400px; | |
| overflow:auto; | |
| box-shadow:1px 1px 15px; | |
| border-radius:4px; | |
| display:none; | |
| z-index:501; | |
| } | |
| .dropDownItem,ul{list-style:none;padding:3px;} | |
| .dropDownItem:hover{ | |
| color:white; | |
| background-color:#00eebb; | |
| } | |
| .close {position:absolute;top:1px;right:1px;color:yellow;background:red;padding:0 5px;} | |
| hr{margin-bottom:3px;margin-top:3px;} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function menuItemSelected(id,key,val,ddm,CB){ | |
| var daId='',sto; | |
| daId = document.querySelector(id); //document.getElementById(id); | |
| daId.value=val; //save vale to input field | |
| daId.setAttribute("selected",key); | |
| if(CB && typeof CB === "function"){ | |
| CB(document.querySelector(id),id,val); | |
| } | |
| document.getElementById(ddm).style.display="none"; | |
| } | |
| //--- calling a callback function on mouse enter | |
| function ddMenuMouseEnter(slctor,ths,ky,CB){ | |
| var aFn= document.querySelector(slctor); | |
| aFn=aFn.parentNode.getAttribute("do"); | |
| aFn && window[aFn](ky); | |
| // the func name as string attribute | |
| } | |
| //------------------ | |
| function akDropDown(opts){ | |
| var str,ddMenuId,htm='',ddMenu='',data=[], cntnr,elInput='', | |
| slctor='',listData=[], menuItems,CB,ttle,key, qry2,displayStr='',dLen=0,searchStr; | |
| if(!opts.formDivID || !opts.inputID){ | |
| console.log("ERROR! Must pass formDivID and inputID"); | |
| return; | |
| } | |
| cntnr=''; //holds menu container Obj | |
| // selector for the input element, input container div ID and the input element ID | |
| slctor='#'+opts.formDivID+' #'+opts.inputID; | |
| menuItems= opts.rows || 5; // number of items to show in menu | |
| CB = opts.callBack || "null"; // the callBack | |
| listData=opts.listData; // the data list | |
| ttle= opts.displayData || null; //the diplay field name | |
| key=opts.keyField || null; | |
| if(!key || !ttle){ | |
| console.log("ERROR! Must pass keyField and displayData"); | |
| return; | |
| } | |
| displayStr = opts.displayStr || listData[ttle]; | |
| searchStr = opts.searchStr || null; | |
| cntnr=document.getElementById(opts.formDivID); //the container Div | |
| elInput= cntnr.querySelector(slctor); | |
| elInput.autocomplete="off"; // no messing up | |
| //------ if already exists else create new | |
| if(document.body.contains(document.getElementById(opts.formDivID+"ddm"))) { | |
| ddMenu=document.getElementById(opts.formDivID+"ddm"); //.remove(); | |
| }else{ ddMenu = document.createElement('div'); ddMenu.id=opts.formDivID+"ddm";cntnr.appendChild(ddMenu); } | |
| ddMenu.className="dropDownMenu "; | |
| ddMenuId=opts.formDivID+"ddm"; | |
| elInput.onkeyup = function(ev){ // key handler | |
| ddMenu.style.display='block'; | |
| str = this.value; //the entered value; | |
| if(str){ | |
| str=str.toString().toLowerCase(); | |
| data = listData.filter(function(item){ | |
| if(item[ttle]){ | |
| if(searchStr && searchStr!==''){ | |
| qry2 = eval(searchStr).toString().toLowerCase(); | |
| }else{ | |
| qry2 = item[key]+item[ttle].toString().toLowerCase(); // key and display item; | |
| } | |
| return qry2.indexOf(str) !== -1; | |
| }else{return false;} | |
| }); | |
| } | |
| // menu body | |
| dLen = data.length>menuItems?menuItems:data.length; | |
| htm='<div class="close" onclick="elHide(this.parentNode.id)">x</div><ul>'; | |
| for(var i=0;i<dLen;i++){ | |
| htm+='<li class="dropDownItem" id="'+data[i][key]+ | |
| '" onclick="menuItemSelected(\''+slctor+'\',this.id,\''+data[i][ttle]+'\',\'' | |
| +ddMenuId+'\','+CB+')"'+'onmouseenter="ddMenuMouseEnter(\'' | |
| +slctor+'\',\''+data[i][ttle]+'\',this.id,'+CB+')">'+eval(displayStr)+'</li>'; | |
| } | |
| htm+='</ul>'; | |
| ddMenu.innerHTML=htm; | |
| }; | |
| } | |
| function elHide(id){ | |
| document.getElementById(id).style.display="none"; | |
| } | |
| //akDropDown(opts); | |
| //------------------ | |
| var clients=[ | |
| {mAcNo:1,mName:"Amir Khan",mCity:"Karachi",mSales:12000}, | |
| {mAcNo:2,mName:"Sanjay",mCity:"Bombay",mSales:10000}, | |
| {mAcNo:3,mName:"John Desoza",mCity:"Delhi",mSales:11500}, | |
| {mAcNo:4,mName:"Aftab Sing",mCity:"London",mSales:12400}, | |
| {mAcNo:5,mName:"Bill Tate",mCity:"New York",mSales:12300}, | |
| {mAcNo:6,mName:"Nokia Bill",mCity:"Ghana",mSales:11250}, | |
| {mAcNo:7,mName:"Chow King",mCity:"Hong Kong",mSales:13000} | |
| ]; | |
| var clientDisplayStr = "'<div class=\"w3-card-2 w3-white\"><span class=\"w3-green w3-block\">'+data[i]['mName']+'</span><span class=\"w3-block\"> City: '+ data[i]['mCity']+'</span><span class=\" w3-block\"> Sales: '+ data[i]['mSales']+'</span></div><hr>'", | |
| clientSearchStr = "item.mAcNo+item.mName+item.mCity+item.mSales"; | |
| var optsClient = { | |
| formDivID:"mNameDiv", | |
| inputID:"mName", | |
| listData:null, // data Objects array | |
| displayData:"mName", | |
| keyField:"mAcNo", | |
| rows:5, // number of menu rows/ietms | |
| callBack:null, | |
| displayStr: clientDisplayStr, | |
| searchStr: clientSearchStr | |
| }; | |
| // call and set | |
| optsClient.listData = clients; | |
| akDropDown(optsClient); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment