jQuery WebFont Dropdown Selector

Dropdown selector for webfonts

by codingdude

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
<label for="fld1">WebFont Selector 1</label>
<input type="text" class="fontSelect" name="fld1"/>
<br/>
<label for="fld2">WebFont Selector 2</label>
<input type="text" class="fontSelect" name="fld2"/>

JavaScript

(function($){
	$.fn.webfontSelector = function(options){
  	var settings = $.extend({
    	fonts:[],
      value:"Select Font"
    },options);
  	return this.each(function(){
    	var $wrapper = $(this).wrap("<span class='jquery-font-select slider-wrap ui floating dropdown labeled search icon basic button'></span>").parent();
      $wrapper.append("<i class='font icon'></i><div class='text'>"+settings.value+"</div><div class='menu'></div>");
      $.each(settings.fonts,function(idx,font){
      	$wrapper.find(".menu").append("<div class='item' data-value='"+font.family+"'>"+font.family+"</div>");
      });
      $wrapper.dropdown({
          onShow:function(){
          	$wrapper.data("user-scrolled",false);
          	getVisibleListElements($wrapper);
            $wrapper.find(".menu").scroll(function(){
            	$wrapper.data("user-scrolled",true);
            	getVisibleListElements($wrapper);
            });
            //fix autocomplete issues
            $wrapper.find("input.search")
            	.attr("autocomplete","off_random_string187381723812");
            $wrapper.find("input.search").bind("change input",function(){
              setTimeout(function(){getVisibleListElements($wrapper,true)},500);
            });
            
            return true;
          },
          onChange:function(value,text){
            renderFont(text);
          	$wrapper.find(".text").css("font-family",value);
          }
      });
      
      //$(this).attr("type","hidden");
    });
  }
  
  function getVisibleListElements($list,unfiltered){
  	if ($list.find(".menu.visible").length == 0){
    	setTimeout(function(){getVisibleListElements($list)},1000);
    	return true;
    }
    var $menu = $list.find(".menu");
  	var top = $menu.scrollTop();
    var bottom = top + $menu.height();
    var selector = ".item";
    
    //scroll selected into view
    $selected = $list.find(".item.selected");
    if ($selected.length>0 && !$list.data("user-scrolled")){
      var...