JSFiddle - React, Tailwind, and code Playground

by Krishnan Balakrishnan

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<label for="tags">Tags: </label>
  <input id="tags" />

JavaScript

$(document).ready(function() {
            BindControls();
        });

        function BindControls() {
            var Categories = [
			"Customer",
			"Equipment",
			"Link",
			"Location",
			"Network",
			"Service",
			"Termination"];

            $('#tags').autocomplete({
                source: Categories,
                minLength: 0,
                scroll: true
            }).focus(function() {
                $(this).autocomplete("search", "");
            });
			
			$('#tags').bind('keypress', function(e) {

				var code = (e.keyCode ? e.keyCode : e.which);
				if(code == 46) { 
				console.log(". pressed");
				var Criteria = [
				"name",
				"id"];
				}
				$( "#tags" ).autocomplete({
					source: Criteria
				});
			});
        }