JSFiddle - React, Tailwind, and code Playground

by LuĂ­s Pereira

HTML

<textarea id="condition" name="condition" cols="50" rows="3">$c[8][clientes][clientes_iva]</textarea>

JavaScript

$(function() {
		var tags = [
			'$c[8][clientes][clientes_iva]',
			'$c[8][paises_iva][paises_iva]',
			'$c[8]',
			'mod(',
			'$user'
		];
		
		function split( val ) {
			return val.split( /([+-\/*()\s*]|[^+-\/*()\s*]+)/g );
		}
		
		function extractLast( term ) {
			return split( term ).pop();
		}
		
		$( "#condition" )
			.bind("keydown", function( event ) {
				if ( event.keyCode === $.ui.keyCode.TAB && $( this ).autocomplete( "instance" ).menu.active ) {
					event.preventDefault();
				}
			})
			
			.autocomplete({
				minLength: 0,
				source: function( request, response ) {
					response( $.ui.autocomplete.filter( tags, extractLast( request.term ) ) );
				},
				focus: function() {
					return false;
				},
				select: function( event, ui ) {
					var terms = split(this.value);
					terms.pop();
					terms.push( ui.item.value );
					this.value = terms.join( "" );
					return false;
				}
			});
	});