web-dev-qa-db-fra.com

Plugin de saisie automatique JQuery de style Facebook

Im après un plugin pour effectuer la saisie semi-automatique comme le fait Facebook en ce que vous pouvez sélectionner plusieurs éléments - similaire à la façon dont le marquage d'une question stackoverflow fonctionne.

En voici quelques-uns:

En avez-vous essayé? Étaient-ils faciles à mettre en œuvre et à personnaliser?

jqueryjquery-pluginsautocomplete
78
Luke Lowrey

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

Je viens de l'essayer et c'était très facile à implémenter en utilisant une page asp.net pour sortir le JSON (à partir des paramètres de recherche) Puis il y a juste quelques lignes de Javascript dont vous avez besoin pour le créer (et les paramètres)

$(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..."
    });
});
84
dkarzon

Celui-ci est très bon! https://github.com/wuyuntao/jquery-autosuggest/

Comment l'utiliser

Évidemment, vous devez vous assurer que la dernière bibliothèque jQuery (au moins 1.3) est déjà chargée dans votre page. Après cela, c'est vraiment simple, ajoutez simplement le code suivant à votre page (assurez-vous d'envelopper votre code dans la fonction prête de jQuery):

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

La ligne de code ci-dessus appliquera AutoSuggest à tous les éléments de type texte input de la page. Chacun utilisera le même ensemble de données. Si vous souhaitez avoir plusieurs champs AutoSuggest sur votre page qui utilisent différents ensembles de données, assurez-vous de les sélectionner séparément. Comme ça:

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

Faire ce qui précède vous permettra de passer dans différentes options et différents ensembles de données. Vous trouverez ci-dessous un exemple d'utilisation d'AutoSuggest avec un objet de données et d'autres options diverses:

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"});
28
webcgo

Voici ce que j'ai trouvé, sans ordre particulier:

22
philfreo

si vous recherchez une fonctionnalité de mentions utilisateur comme fb et tw, c'est un bon plugin http://podio.github.io/jquery-mentions-input/

4
vikas devde

Il s'agit du plug-in de saisie semi-automatique JQuery d'origine avant son intégration dans JQueryUI. Si vous cherchez à servir uniquement JQuery mais pas l'intégralité de la bibliothèque JQueryUI, utilisez celle-ci. J'ai utilisé celui-ci dans le passé et j'en ai été satisfait.

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

3
James Lawruk

J'ai trouvé celui-ci. Semble robuste, bien entretenu et réactif.

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

1
subeebot

J'ai été assez impressionné par la devbridge autosuggest. Hautement personnalisable

0
andy boot