ejemplo - Complemento de autocompletado JQuery de estilo de Facebook

buscador dinamico jquery

Question

Después de completar un complemento para autocompletar como Facebook, puede seleccionar varios elementos, de forma similar a cómo funciona el etiquetado de una pregunta de stackoverflow.

Aquí hay una pareja con la que me encontré:

• http://wharsojo.wordpress.com/2008/02/18/jquery-facebook-autocomplete
• http://www.emposha.com/javascript/fcbkcomplete.html
• https://github.com/loopj/jquery-tokeninput

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

Answer 1

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

Cómo usarlo

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

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

La línea de código anterior aplicará AutoSuggest a todos input elementos de input tipo de texto en la página. Cada uno usará el mismo conjunto de Datos. Si desea tener múltiples campos de AutoSuggest en su página que usan 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 varias 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"});

Answer 2

Encontré este. Parece robusto, bien mantenido y receptivo.

http://ivaynberg.github.io/select2/

Answer 3

Estaba bastante impresionado con el autosugestor de devbridge . Altamente personalizable

Answer 4

Este es el plugin de autocompletado original de JQuery antes de integrarlo en JQueryUI. Si está buscando servir solo JQuery pero no toda la biblioteca JQueryUI, use esta. He usado este en el pasado y he estado feliz con él.

http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete /

Answer 5

Esto es lo que he encontrado, sin ningún orden en particular:

• Selectize.js
• jQuery Tokeninput - https://github.com/loopj/jquery-tokeninput
• Select2
• TextboxList
• Tag-it - GitHub
• TextExt
• http://www.emposha.com/javascript/fcbkcomplete.html - GitHub - demo
• jQuery Facebook Autocomplete
• https://github.com/wuyuntao/jquery-autosuggest/ - demo de drewwilson
• Etiquetas de Pines
• tagedit
• Tagit
• jQuery Etiquetas de entrada
• Tags
• jquery.token-field

Answer 6

si está buscando características de usuario como fb y tw, este es un buen plugin http://podio.github.io/jquery-mentions-input/

Answer 7

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

Acabo de probar esto y fue muy fácil de implementar usando una página asp.net para generar el JSON (de los parámetros de búsqueda). Luego hay unas pocas líneas de Javascript que necesitas 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..."
    });
});