jQuery plug-in de preenchimento automático de tags, como as tags de entrada do StackOverflow? [fechadas]

523

Quais soluções realizam o mesmo preenchimento automático que o SO usa para inserir tags?

Existem plugins que podem lidar com uma palavra, mas eu não vi nenhum que lide com várias palavras.

jquery  autocomplete  tags 
— Joe Phillips
fonte
Votação para fechar como ferramenta rec.
— Ciro Santilli publicou
1
Criei o melhor - github.com/yairEO/tagify
— vsync
@vsync Adicionou à lista na primeira resposta. Infelizmente não pode ligar diretamente para codepen.io devido a não ter qualquer código na resposta
— Joe Phillips
@JoePhilllips - talvez ele aceite URL encurtado
— vsync
@JoePhilllips - Meu plugin é melhor que o melhor no topo da lista e merece estar no topo e eu tenho bons pontos de venda por isso. atualmente, o principal da lista está inchado (x4 que o meu), usa elemento de entrada extra (inválido para serialização de formulários) e não suporta vírgulas ou marcas de colagem com eles. ele oferece alguns recursos que são bons, mas desnecessários na maioria dos casos. autocompletedeve ser usado desesperadamente IMHO
— vsync 13/10

Respostas:

763

Em ordem de atividade, demonstrações / exemplos disponíveis e simplicidade:

Relacionado:

— Dmitriy Nesteryuk
fonte
No IE9, ele está fornecendo "Erro da linha 18: o objeto não suporta a propriedade ou o método 'tagit'"
— Raghav
2
Qualquer um que procura o mais versão atualizada, documentação e mais extensivos exemplos deste incrível plug-in deve ir aqui e garfo de distância: github.com/aehlke/tag-it
— Crisman
1
atualização: Eu acho que magicsuggest é a melhor opção agora.
— ssj
8
tag-é superestimada. Exigir jquery para um sistema de tags simples é demais, mas exigir jQuery UI e jquery UI CSS é uma loucura hoje em dia. Não vale a pena.
— Alvaro
1
@scniro Acabei usando jquery.tagsinput porque não me importo com o jQuery, que já está sendo usado no meu projeto. Eu apenas pensei que era louco pedir jquery UI e CSS.
— Alvaro
62

Bootstrap: se você estiver usando o Bootstrap. Essa é realmente boa: Select2

Além disso, o TokenInput é interessante. Primeiro, ele não depende da jQuery-UI, depois sua configuração é muito suave.

O único problema que tive foi o fato de não oferecer suporte gratuito à marcação nativa. Portanto, eu tenho que retornar a string de consulta de volta ao cliente como parte da resposta JSON.

Como @culithay mencionado no comentário, o TokenInput suporta muitos recursos para personalizar. E destaque de alguns recursos que os outros não têm:

  • tokenLimit: o número máximo de resultados que podem ser selecionados pelo usuário. Use null para permitir seleções ilimitadas
  • minChars: o número mínimo de caracteres que o usuário deve inserir antes que uma pesquisa seja realizada.
  • queryParam: o nome do parâmetro de consulta que você espera que contenha o termo de pesquisa no lado do servidor

Obrigado culithay pela contribuição.

— Nishant
fonte
3
O TokenInput parece exatamente o que eu estava procurando: o usuário digita algumas coisas, realiza uma pesquisa no servidor, o usuário pode selecionar um elemento pesquisado, enxaguar e repetir.
— Mala
1
O TokenInput suporta muitos recursos para personalizar. E destaco alguns recursos que os outros não têm. - tokenLimit: o número máximo de resultados que podem ser selecionados pelo usuário. Use null para permitir seleções ilimitadas - minChars: o número mínimo de caracteres que o usuário deve inserir antes que uma pesquisa seja realizada. - queryParam: O nome do parâmetro de consulta que você espera para conter o termo de pesquisa no lado do servidor
— culithay
1
@culithay adicionada à resposta
— Nishant
Como adicionar novas tags gratuitas com ele: stackoverflow.com/questions/28656977/… Hard :-(
— Ciro Santilli 郝海东 冠状 病 六四 事件
Um bom. Não oferecer suporte à marcação gratuita não é um grande problema, pois pode ser facilmente superado.
— RationalRabbit
9

Isso originalmente respondeu a uma pergunta complementar sobre a sabedoria de fazer o download do jQuery versus acessá-lo através de uma CDN, que não está mais presente ...

Para responder à pergunta sobre o Google. Eu mudei para acessar o JQuery e a maioria desses tipos de bibliotecas através da CDN correspondente em meus sites.

À medida que mais pessoas fazem isso, é mais provável que seja armazenado em cache nas máquinas dos usuários, então meu voto é uma boa ideia.

Nos cinco anos desde que ofereci isso pela primeira vez, tornou-se uma sabedoria comum.

— Julian
fonte
3
Também lançamos isso como parte de nossos modelos padrão. O Google pode veicular esse código compactado e retirado de uma CDN mais rapidamente do que nós, e se houver até 2% de chance de um visitante ter esse cache, é melhor do que nenhuma chance.
— 6242 Tom
27
Como é essa a resposta para a pergunta original?
— Derek
3
A última parte 'Além disso, ...' pergunta se o link para a versão do Google é uma ideia boa ou ruim, e minha resposta é que é uma ideia cada vez mais boa.
— Julian
@ Derek Eu não acho que tive outras respostas aceitáveis ​​quando o perguntei originalmente. Isso mudou desde então.
— Joe Phillips
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.