L’esigenza: in un form ho bisogno di impostare in un campo lo slug della risorsa che sto creando, magari e probabilmente a partire da un altro campo. Ad esempio, creando un articolo o una pagina devo generare lo slug a partire da un campo che potrebbe in questi casi potrebbe essere il titolo.

Un’immagine esplicativa:
Titolo e slug

A questo scopo ho scritto un semplice ed efficace plugin per jQuery, chiamato slugify, che potete scaricare liberamente da qui.

Il funzionamento è molto semplice:

$(function() {
	$().slugify('#title', '#slug');
});

Richiede semplicemente di indicare il campo sorgente e quello di destinazione (valgono le solite regole per i selettori). Bisogna quindi strutturare il form più o meno così:

<form>
	<input type="text" id="title" />
	<input type="text" id="slug" />
</form>

Notare che se non vengono passati sorgente e destinazione, di default utilizzerà “form #title” e “form #slug”. Quindi è possibile anche lanciarlo come:

$(function() {
	$().slugify();
});

(in questo caso utilizzerà ” form #title” e “form #slug”)

$(function() {
	$().slugify('#name');
});

(utilizzerà “#name” e “form #slug”)

Simulando il comportamento di molti CMS e simili, come ad esempio proprio WordPress, slugify:

  1. agisce solo se il campo destinazione (dello slug) è vuoto. In altri termini, se lo slug era già stato impostato (generato o manualmente), non lo aggiorna, a meno che non lo si cancelli del tutto;
  2. genera la destinazione anche a partire dalla destinazione, ovvero verificando che lo slug sia valido e modificandolo se non lo è.

Nel generare lo slug:

  1. vengono sostituite le lettere accentate;
  2. i simboli e lo spazio vengono convertiti in “-“.

XHTML - Puoi usare questi tag: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>