Tag Facebook Style con jQuery e PHP
Creare un sistema di Tagging in stile Facebook non è mai stato così semplice con un semplicissimo plugin jQuery, jQuery Tags Input che con pochissime righe di codice integrate ad ui autocomplete vi permetterà di avere un sistema di autocompletamento nell’inserimento dei plugin. Ma passiamo subito al codice.
Per prima cosa includere nell’header i seguenti script che in questo caso sono hostati sui rispettivi server :
<link rel="stylesheet" type="text/css" href="http://xoxco.com/projects/code/tagsinput/jquery.tagsinput.css" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script type="text/javascript" src="http://xoxco.com/projects/code/tagsinput/jquery.tagsinput.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script> <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/start/jquery-ui.css" /> <script type="text/javascript"> $(function() { $('#tags').tagsInput({ height:'auto', defaultText:'Aggiungi Tag', autocomplete_url:'json.php' // jquery ui autocomplete requires a json endpoint }); }); </script>
nel body queste pochissime righe di codice
<form> <label>Autocomplete:</label> <input id="tags" type="text" class="tags"/> </form>
il file Json.php sarebbe il file che richiama tutti i tags, per comodità li ho inseriti manualmente scrivendoli, ma in un’applicazione reale dovrebbero essere estratti da un database :
File json.php
< ?php echo ' [ { "id": "Netta rufina", "label": "Red-crested Pochard", "value": "Red-crested Pochard" }, { "id": "Sterna sandvicensis", "label": "Sandwich Tern", "value": "Sandwich Tern" }, { "id": "Saxicola rubetra", "label": "Whinchat", "value": "Whinchat" }, { "id": "Saxicola rubicola", "label": "European Stonechat", "value": "European Stonechat" }, { "id": "Lanius senator", "label": "Woodchat Shrike", "value": "Woodchat Shrike" }, { "id": "Coccothraustes coccothraustes", "label": "Hawfinch", "value": "Hawfinch" }, { "id": "Ficedula hypoleuca", "label": "Eurasian Pied Flycatcher", "value": "Eurasian Pied Flycatcher" }, { "id": "Sitta europaea", "label": "Eurasian Nuthatch", "value": "Eurasian Nuthatch" }, { "id": "Pyrrhula pyrrhula", "label": "Eurasian Bullfinch", "value": "Eurasian Bullfinch" }, { "id": "Muscicapa striata", "label": "Spotted Flycatcher", "value": "Spotted Flycatcher" }, { "id": "Carduelis chloris", "label": "European Greenfinch", "value": "European Greenfinch" }, { "id": "Carduelis carduelis", "label": "European Goldfinch", "value": "European Goldfinch" } ]'; ?>
Questi sono tutti gli argomenti che è possibile passare all’applicazione, ma noi ne abbiamo usato solo uno e cioè il defaultText che sarebbe la label di default nel input text, prima di scriverci all’interno.
$(selector).tagsInput({ 'autocomplete_url': url_to_autocomplete_api, 'autocomplete': { option: value, option: value}, 'height':'100px', 'width':'300px', 'interactive':true, 'defaultText':'add a tag', 'onAddTag':callback_function, 'onRemoveTag':callback_function, 'onChange' : callback_function, 'removeWithBackspace' : true, 'minChars' : 0, 'maxChars' : 0 //if not provided there is no limit, 'placeholderColor' : '#666666' });
Qui potete trovare una Demo.
Qui potete scaricare il file zippato
loading...
loading...