Complemento de autocompletado JQuery estilo Facebook [cerrado]

78

Estoy buscando un complemento para autocompletar como lo hace Facebook, ya que puede seleccionar varios elementos, similar a cómo funciona etiquetar una pregunta de flujo de pila.

Aquí hay un par con el que me encontré:

¿Has probado alguno de estos? ¿Fueron fáciles de implementar y personalizar?

jquery  jquery-plugins  autocomplete 
— Luke Lowrey
fuente
¿Qué complemento usaste? Estoy buscando uno que funcione bien en Firefox e IE
— San
Advertencia: Ahora he implementado la entrada de token de JQuery en mi proyecto, y parece que no solo ese, sino todos los demás mencionados aquí, quieren poner el campo de entrada en una línea separada. No parece posible ponerlos en la misma línea, es decir To: [..the field..]. Quizás el posicionamiento absoluto, o el uso de tablas, sea la solución, pero tampoco me gusta, pero quizás me esté perdiendo algo ..
— Adrian Smith
JQuery-tokeninput ahora tiene un estilo de Facebook que permite colocar múltiples tokens en la misma línea. Vea la demostración.
— Druvision

Respuestas:

84

https://github.com/loopj/jquery-tokeninput

Acabo de probar este y fue realmente fácil de implementar usando una página asp.net para generar el JSON (desde los parámetros de búsqueda) Luego, solo hay algunas líneas de Javascript que necesita para crearlo (y la configuración)

$(document).ready(function() {
        $("#Users").tokenInput("../Services/Job/UnassignedUsers.aspx?p=<%= projectID %>&j=<%= jobID %>", {
        hintText: "Begin typing the user name of the person you wish to assign.",
        noResultsText: "No results",
        searchingText: "Searching..."
    });
});
— dkarzon
fuente
También parece tener errores de FireFox
— AnApprentice
@AnApprentice: la última versión tiene muchas correcciones de errores.
— Dave Jarvis
Aún no se admite la creación de una nueva etiqueta sobre la marcha
— deerchao
Me encantó este complemento, pero tuve que dejarlo ir para el autocompletado de jqueryUI ya que necesitaba soporte sobre la marcha
— Omnipresente
3
Si está utilizando ASP.Net, puede usar mi proyecto opensourse ASPTokenInput, que agrega funcionalidad del lado del servidor al complemento jquery-tokeninput github.com/harindaka/ASPTokenInput/wiki
— Harindaka
28

¡Este muy bueno! https://github.com/wuyuntao/jquery-autosuggest/

Cómo usarlo

Obviamente, debe asegurarse de tener la última biblioteca de jQuery (al menos 1.3) ya cargada en su página. Después de eso, es realmente simple, simplemente agregue el siguiente código a su página (asegúrese de envolver su código en la función lista de jQuery):

$(function(){
    $("input[type=text]").autoSuggest(data);
});

La línea de código anterior aplicará AutoSuggest a todos los input elementos de tipo de texto en la página. Cada uno utilizará el mismo conjunto de datos. Si desea tener varios campos de AutoSuggest en su página que usen diferentes conjuntos de datos, asegúrese de seleccionarlos por separado. Me gusta esto:

$(function(){
    $("div.someClass input").autoSuggest(data);
    $("#someID input").autoSuggest(other_data);
});

Hacer lo anterior le permitirá pasar diferentes opciones y diferentes conjuntos de datos. A continuación se muestra un ejemplo del uso de AutoSuggest con un objeto de datos y otras opciones:

var data = {items: [
    {value: "21", name: "Mick Jagger"},
    {value: "43", name: "Johnny Storm"},
    {value: "46", name: "Richard Hatch"},
    {value: "54", name: "Kelly Slater"},
    {value: "55", name: "Rudy Hamilton"},
    {value: "79", name: "Michael Jordan"}
]};
$("input[type=text]").autoSuggest(data.items, {selectedItemProp: "name", searchObjProps: "name"});
— webcgo
fuente
1
Este es, con mucho, el mejor complemento autosugestivo que existe. ¡No permite que el usuario agregue registros duplicados!
— Atmorell
2
características ricas, pero toneladas de errores. Al final, creé el mío: the.deerchao.net/TagEditor
— deerchao
@deerchao, su trabajo es muy, muy agradable, solo quería saber si puedo vincularlo con el código C #? Me refiero a las etiquetas, también cómo hacerlo sobre la marcha con servicios web, gracias
— user1074474
@ user1074474 De forma predeterminada, solo admite datos JSON recuperados de una URL. Pero hay toda la fuente, puedes personalizarla todo lo que quieras.
— deerchao
@deerchao, ¿tenías alguna actualización sobre este complemento? Estoy tratando de usar pero obtengo este error, ¿ TypeError: $$.autocomplete is not a function [Break On This Error] close: function () {alguna ayuda?
— ReynierPM
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.