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
1

Acabamos de abrir este plug-in de jquery no Github: tactivos / jquery-sew .

user1880508
fonte
1
Embora esse link possa responder à pergunta, é melhor incluir aqui as partes essenciais da resposta e fornecer o link para referência. As respostas somente de link podem se tornar inválidas (e com voto negativo) se a página vinculada for alterada. Veja Como responder para saber por que é importante.
Bytebuster 5/12
3
A página de demonstração está morta.
Edward Olamisan