How to create php myqli parameter and mix programming with jQuery?

For your case, the following occurred to me, first to have a function that will be in charge of saving the tags added by the user in a global array.

function agregar_tags(tag, arrtags){
  var index = -1;
  var resultado = control_tags(tag, arrtags);

  for(var i = 0; i < arrtags.length; i++) {
    if(arrtags[i] === tag) {
      index = i;
    }
  }

  if(index > -1) {
    arrtags[index] = tag;
  }else {
    arrtags.push(tag);
  }

  return resultado;

}

The function called "add_tags" receives as parameters: tag (the tag written by the user that you want to enter) and arrtags (global array that stores the tags written by the user). This function is responsible for saving the tags written by the user in the global array without repeating them. Thanks to this function we prevent the user from entering repeated tags. I adapted the previous function from the following example: Unique array in javascript

Well, as we can see, within the "add_tags" function we call another call "control_tags", this is responsible for adding only the tags stored in the database, comparing if the tag is within the array that stores the tags from the database. database.

function control_tags(needle, haystack) {
 var length = haystack.length;

 for(var i = 0; i < length; i++) {
    if(typeof haystack[i] == 'object') {
        if(arrayCompare(haystack[i], needle)) return true;
    } else {
        if(haystack[i] == needle) return true;
    }
 }

 return false;

}

control_tags returns true if the tag entered by the user is in the array of tags from the database, otherwise it returns false if the tag is not one of those stored in the database. With this we prevent users from entering tags that are not allowed. The control_tags function is very useful because it is like a PHP in_array but adapted to Javascript.

Therefore, two global arrays must be created, one that already saves the tags from the database and another array to save the tags added by the user. The array that stores the database tags would look like this:

var arr_db = ["html", "css", "jquery", "javascript", "php"];
var usuario_tags = [];

And your tag code would look like this:

$("#tags input").on({
  focusout : function() {
    var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig,''); // allowed characters
    // Aqui agregamos los tags escrito por el usuario y los cuales quiere agregar
    var control = agregar_tags(txt.toLowerCase(), usuario_tags);

    // Lo siguiente verifica que el tag ingresado sea de los permitidos en base de datos
    var verifica_tags = control_tags(txt.toLowerCase(), arr_db);


  // control debe retornar false con esto evitamos que se inserten tags repetidos
 // verifica_tags debe retornar true, esto quiere decir que el tag esta guardado en la base de datos
  if(txt && control == false && verifica_tags == true) {
    $("<span/>", 
    {
        text: txt.toLowerCase(), 
        insertBefore:this
    });


  }
   this.value = "";

},
keyup : function(ev) {
  // if: comma|enter (delimit more keyCodes with | pipe)
  if(/(188|13)/.test(ev.which)) $(this).focusout(); 
}

});

How to load the tags from the database in the arr_db array? It occurs to me through ajax, on the PHP side you make the corresponding query, you return a json, and in javascript you go through it with a for and with arr_db.push(returnedData[i]) you save the tags in the array.

Basic example of database query in PHP and json return with all saved tags:

$servername = "localhost";
$username = "root";
$password = "";
$dbname = "tagsdb";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
 die("Connection failed: " . $conn->connect_error);
} 

$sql = "SELECT nombre FROM tags";
$result = $conn->query($sql);
$arr = array();
$i = 0;

if ($result->num_rows > 0) {
  // output data of each row
  while($row = $result->fetch_assoc()) {
    $arr[$i] = strtolower($row['nombre']);
    $i++;
  }
} 

echo json_encode($arr);
$conn->close();

Example with ajax to load the tags from the database in the global array:

  $.ajax({
    url: 'tags.php',
    success: function(result)
    {
        var returnedData = JSON.parse(result);
        var total = returnedData.length;

        for(var i = 0; i < total; i++){
            arr_db.push(returnedData[i]);
        }
     }
  });

Finally in the next block you must add the following:

$('#tags').on('click', 'span', function() {
 $(this).remove(); 

 quitar_tags(usuario_tags, $(this).text());
});

remove_tags is a function that is responsible for removing the tags from the global array, which saves the tags selected by the user, when the user performs the action of removing a tag. Source : Removing elements from an array

function quitar_tags(array, element) {
 const index = array.indexOf(element);
 array.splice(index, 1);
}

I hope this guide will help you and everyone who goes through something similar. Cheers!

I would do something like this in JS:

var tags = new Tags('#tags input','http://localhost/newTagAjax.php')

jQuery("#tags input").on('keydown', function(ev) {
    if(ev.which === 13) {
        tags.add()
    }
})

function Tags(id,addURL){
    this.id = id
    this.addURL = addURL
}

Tags.prototype.add = function () {
    var _this = this
    var newTag = $(_this.id).val()
    $.post(this.addURL, {tag:newTag}, function( data ) {

        if( data.res) {
            //Aquí colocas tu código JS si es correcto
        }
        //Podrías usar este plugin
        $.notify({message: data.message})
    },"json")

}

And the PHP would do something like this:

if ( !empty($_POST['tag']) ) {
    //Una clase que debes crear
    $db = new DBConnect();
    $id_tag = $db->add($_POST['tag']);
    $res= array(
        'res' => true,
        'id' => $id_tag,
        'message' => 'Tag añadida a la DB'
    );
    echo json_encode($res);
    exit();
}
$res= array(
    'res' => false,
    'message' => 'Error al añadir el tag a la DB'
);
echo json_encode($res);
exit();

$(function(){// DOM ready
			// ::: TAGS BOX
  var arr_php = [ "COMIDA", "HAMBRE", "TENEDOR", "MORIR" ]; //ARRAY CARGADO CON PHP
  var arr_temp=[];
  $("#tags input").on({
    focusout : function() {
	  var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig,'');
	  if(jQuery.inArray(txt, arr_php) !== -1){
	    if(jQuery.inArray(txt.toLowerCase(), arr_temp)=== -1){
		  $("<span/>", {text:txt.toLowerCase(), insertBefore:this});
		  arr_temp.push(txt.toLowerCase());
	    }
	  }
	  this.value = "";
	},
	keyup : function(ev){
		// if: comma|enter (delimit more keyCodes with | pipe)
	   	if(/(188|13)/.test(ev.which)){
	   		$(this).focusout();
	   	} 
	}
  });
  $('#tags').on('click', 'span', function() {
	$(this).remove(); 
  });

		});

<style>
      	#tags{
		  float:left;
		  border:1px solid #ccc;
		  padding:5px;
		  font-family:Arial;
		}
		#tags > span{
		  cursor:pointer;
		  display:block;
		  float:left;
		  color:#fff;
		  background:#789;
		  padding:5px;
		  padding-right:25px;
		  margin:4px;
		}
		#tags > span:hover{
		  opacity:0.7;
		}
		#tags > span:after{
		 position:absolute;
		 content:"×";
		 border:1px solid;
		 padding:2px 5px;
		 margin-left:3px;
		 font-size:11px;
		}
		#tags > input{
		  background:#eee;
		  border:0;
		  margin:4px;
		  padding:7px;
		  width:auto;
		}
    </style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tags">
	  <span>jquery</span>
	  <input type="text" value="" placeholder="Add a tag" />
	</div>

First you load the content of an array with PHP, this content can be extracted from a database with MySql

var arr_php = [<?php echo '"OK","COMIDA","HAMBRE","MORIR"'; ?>];
var arr_temp=[];

So now you have to query if the entered word exists in the array loaded from PHP if(jQuery.inArray(txt, arr_php) !== -1)

In your code you replace:

focusout : function() {
      var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig,''); // allowed characters
      if(txt) $("<span/>", {text:txt.toLowerCase(), insertBefore:this});
      this.value = "";
    },

by:

focusout : function() {
      var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig,'');
      if(jQuery.inArray(txt, arr_php) !== -1){
        if(jQuery.inArray(txt.toLowerCase(), arr_temp)=== -1){
          $("<span/>", {text:txt.toLowerCase(), insertBefore:this});
          arr_temp.push(txt.toLowerCase());
        }
      }
      this.value = "";
    },

There are many plugins for jQuery to add tags to forms.

jQuery autocomplete tagging plugin like StackOverflow's input tags?

I don't know if you are using any framework, but I know some that allow you to add content to certain "zones" in the form of blocks. Twig for example allows you to do something like:

<?= block 'inline_javascript' do ?>
<script src="..."></script>
<script>
;(function ($) {
    // ...
})(jQuery)
</script>
<? end ?>
# Después imprimes el contenido del bloque `inline_javascript`
<html>
    </head>
    </head>
</html>
<body>
    <?= yield('inline_javascript') ?>
</body>
</html>

I don't remember if this is the syntax.

The point is that in those blocks you could either include your array of allowed tags by declaring a variable in JS, or implement a helper that prints the plugin implementation completely, just telling it maybe the field name, allowed tags, etc.

You can serialize your object to a JSON object that you can consume from JavaScript:

<?php
$allowed = array('tag1', 'tag2', 'tag3', ...);
$allowedTags = json_encode($allowed);
?>

Wherever the tag array comes from, whether it's from the database or wherever, you can serialize the array to JSON and put the content of the variable $allowedTags(a JSON object) into a JavaScript variable.

You have to be especially careful with Latin characters, for example. Also correctly handle the quotes of the keys of the JSON object.

json_encode