Gerando Slugs automaticamente utilizando JQuery

Dois campos de texto, um para o título e outro para a slug. Enquanto digita-se o título ("Exemplo de Slug com Acentuação), o script gera a slug da seguinte forma: exemplo traço de traço slug traço com traço acentuacao.

Olá pessoal!

Já dei a dica nesse blog de como gerar slugs utilizando o PHP, no back-end, através de um método de remoção de acentos e substituição de caracteres especiais ou espaços por seus equivalentes ou pelo hífen (-). Agora vou mostrar como gerar automaticamente as slugs no front-end, preenchendo o campo de slug enquanto você digita o campo base (ex.: campo de título, nome, etc) . Lembrando que é sempre bom continuar utilizando a validação de slugs no Back-end porque o usuário pode alterar facilmente o conteúdo da slug, quer no seu formulário se estiver editável, quer pela opção “Inspecionar Elemento” da maioria dos navegadores.

 Antes de mais nada, é importante que eu ressalte que os créditos por essa função JQuery são do Blog do Leo Caseiro. Abaixo do post vocês poderão encontrar o link do post original no Blog do Leo. Lá você encontrará outras maneiras de utilizar a função para gerar a slug. Tentei facilitar algumas coisas para vocês, principalmente para os iniciantes em JQuery ou JavaScript. No final, seu formulário será capaz de fazer algo semelhante ao abaixo.

Dois campos de texto, um para o título e outro para a slug. Enquanto digita-se o título ("Exemplo de Slug com Acentuação), o script gera a slug da seguinte forma: exemplo traço de traço slug traço com traço acentuacao.

Primeiro de tudo, baixe através do GitHub os arquivos JS. Você poderá fazer o download dos arquivos clicando aqui. No GitHub, clique em Download Zip, na barra a direita (veja abaixo).

Captura da Tela que mostra a página no GitHub onde você poderá baixar o script para gerar automaticamente a slug

O que devo copiar para meu projeto? Basicamente, dois arquivos são importantes nesse zip, são eles: jquery.stringToSlug.js e jquery.stringToSlug.min.js. São esses arquivos que você deve ter no seu diretório de arquivos na sua pasta public (geralmente colocamos os arquivos JavaScript [incluindo JQuery] em uma pasta chamada js).

No seu arquivo onde encontra-se o formulário para o qual você deseja gerar a slug automaticamente com base em algum texto digitado em alguma input, não esqueça de importar ou chamar os arquivos .js. Deverá ser algo como isso:

<script type="text/javascript" src="/NomeDoProjeto/public/js/jquery.stringToSlug.min.js"></script>
<script type="text/javascript" src="/NomeDoProjeto/public/js/jquery.stringToSlug.js"></script>

Suponhamos que você possua dois campos de texto  em seu formulário (tal como o mostrado mais acima na imagem) com id titulo e o outro slugGrupo (você pode dar o nome que desejar, desde que não esteja duplicado), tal como a imagem abaixo:

html com formulario mostrando os dois inputs de texto, dando destaque ao atributo id que em um dos inputs recebe "titulo" e em outro input recebe "slguGrupo"

Você deverá adicionar ao seu arquivo, preferencialmente após a importação dos arquivos .js para geração de slug, o seguinte código:

jQuery(document).ready(function(){
  $("#titulo").stringToSlug({
    setEvents: 'keyup keydown blur',
    getPut: '#slugGrupo',
    space: '-', 
  });
});

Isso fará com que, quando a página for carregada, ao digitar no campo de id título, o campo de id slugGrupo receba o valor digitado no campo anterior, adicionado de hífen (-) nos espaços chamando a função JQuery para gerar a slug.

É isso aí pessoal, o seu formulário já deve estar gerando automaticamente a slug ao digitar o título. Algo mais completo vocês podem encontrar no post original dessa função, no blog do Leo Caseiro.

Referência

Blog Leo Caseiro. Disponível em: http://leocaseiro.com.br/jquery-plugin-string-to-slug/. Acesso em 10/05/2015.

 

CategoriasSem categoria

1 comentário

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.