Hello Punk! In my daily boring...
I found something interesting that I will share with you, this is not too fancy or glam but still "fun-cy" for me, cz In my stupid knowledge this is really helpful and enough for me and myself.
HTML5 Input Datalist
At least, this is whatW3Schools said in their example:
What if I wrap inside PHP Function?
When I work withHTMX I need isolated component that can be reusable a form. So I create a PHP Function that generate the Input Datalist.
// Filename: helpers/Utils.phppublicstaticfunctionselectSearch(string$inputId,array$options,int|string$selected=''):string{$inputHTML='<div>';$inputHTML.='<input type="text"mf">.$inputId.'" list="" placeholder="Search..." autocomplete="off" />';$inputHTML.='<datalistmf">.$inputId.'_list">';$selectedText='';$selectedValue='';foreach($optionsas$option){$text=\explode('#',$option)[1];$value=\explode('#',$option)[0];if($selected==$value){$selectedText=$text;$selectedValue=$value;}$inputHTML.='<option value="'.$option.'">'.$text.'</option>';}$inputHTML.='</datalist>';$inputHTML.='<input type="hidden" name="'.$inputId.'"mf">.$inputId.'" value="'.$selectedValue.'" />';$inputHTML.='</div>';$inputHTML.='<script type="text/javascript">';$inputHTML.='fancyDropdown("'.$inputId.'");';$inputHTML.='setTimeout(() => document.getElementById("'.$inputId.'").value = "'.$selectedText.'", 350);';$inputHTML.='</script>';return$inputHTML;}I create a static function insideUtils class so I can use that function everywhere in my project.
Is that using TailwindCSS? Yes, it's too dirty. But fck it! It's work! (Don't blame on me, if you really programmer so read it)
You can see thisscript:
$inputHTML.='<script type="text/javascript">';$inputHTML.='fancyDropdown("'.$inputId.'");';$inputHTML.='setTimeout(() => document.getElementById("'.$inputId.'").value = "'.$selectedText.'", 350);';$inputHTML.='</script>';Yes! Again I wrote JavaScript as a string in PHP, why not! And where is the fckinfancyDropdown come from?!
Here is, I found a Question in StackOverflow that asked about
The Question:https://stackoverflow.com/q/13693482
Yes! Around 11 years ago, and the solution that match with my need is come around
The Solution:https://stackoverflow.com/a/76178626
The updated version of
Original Answer:https://stackoverflow.com/a/74786719
Here is this code:
functionfancyDropdown(inputId){constinput=document.getElementById(inputId);consttarget=document.getElementById('target_'+inputId);constdatalist=input.nextElementSibling;letminWidth=datalist.offsetWidth;functionoutputsize(){if(input.offsetWidth<minWidth){datalist.style.minWidth=input.offsetWidth+'px';}else{datalist.style.width=input.offsetWidth+'px';}}newResizeObserver(outputsize).observe(input);input.addEventListener("input",function(e){datalist.style.display="block";consttext=input.value.toUpperCase();lethide=1;for(letoptionofdatalist.options){if(option.value.toUpperCase().indexOf(text)>-1){option.style.display="block";hide=0;}else{option.style.display="none";}}if(hide){datalist.style.display="none";}});input.addEventListener("click",function(e){lethide=1;for(letoptionofdatalist.options){if(window.getComputedStyle(option,null).display=="block")hide=0;}if(datalist.style.display=="block"||hide==1){datalist.style.display="none";}else{datalist.style.display="block";}});document.addEventListener("click",function(e){if(e.target.tagName=="OPTION"){letinputValue=e.target.value.split('#');input.value=inputValue[1];target.value=inputValue[0];}if(e.target.tagName!=="DATALIST"&&e.target.tagName!=="INPUT"){datalist.style.display="none";}});datalist.style.display="none";}Top comments(0)
For further actions, you may consider blocking this person and/orreporting abuse
