JSFiddle - React, Tailwind, and code Playground

by Bill Morris

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://dev01.vantagefinance.com/library/jscript/jquery/seritas.columnDroplist.css">
<input type=text id=txtTest>

<p>

</p>

<!-- input type=text id=txtTest2 -->

CSS

body {font-family: verdana, arial, sans-serif; size: 12px}

#seritas-droplist * {font-size: .9em;}

JavaScript

(function($){

	//--------------------------------------------------------------------------------
	$.fn.dropListIt = function(options) {

        var targetPos;
        var oneLiner = {overflow: "hidden", height: "1em"};
        var moreLiner = {overflow: "scroll", height: "auto"};
        var droplistid = "seritas-droplist-" + getRandomId();

		var settings = $.extend({
			  classname: ''
			, waittime: 1000
			, altitude: 'mid'
			, placeholder: 'Type at least three letters...'
			, size: 40
			, maxlength: 100
			, url: ''
            , columns: []
			, noresultsmsg: 'No results found.'
		}, options);
		
		var css = {width: '200px'
			, height: '200px'
			, boxShadow: fnGetBoxShadow()
			, border: '1px solid gray'
			, display: 'none'}
    
		var C = this, D;

		var droplistContainer = fnGetDroplistContainer(droplistid, C);

		fnInsertIconSpan(C);
		
		C.keyup(function(event){
    		if(event.keyCode == 27){
				droplistContainer.slideUp(250);
				return;
      		}
			if(D)clearTimeout(D);
			if(C.val().length == 0) {
				droplistContainer.slideUp(250);
				return;
			} else {
				if(C.val().length < settings.minlength) return;
			}
			D = setTimeout(function(){
				var f = settings.url.split("?");
				var vUrl = f[0];
				var vopts = {};
				vopts.val = C.val();
				if(typeof f[1] != 'undefined'){
					var g = f[1].split('&');
					for(var i = 0; i < g.length; i++){
						h = g[i].split("=");
						vopts[h[0]] = h[1];
					}
					
				}
				$.post(vUrl, vopts, function(data){
					var txtjson = '';
					try
					{
					   txtjson = JSON.parse(data);
                       if(txtjson.rs.length == 0) {
							droplistContainer.css(oneLiner).html('[82] ' + settings.noresultsmsg).slideDown(250);   
                            return;
                       } else {
							droplistContainer.html('').css(moreLiner);
                            var rows = 0;
                            var cols = settings.columns;
                            var t = $("<table>"),...