Obtenir la saisie de l'utilisateur, de la simple boîte de sélection à l'aide de Select2

Question

J'ai juste commencé à l'aide de Select2 (http://ivaynberg.github.io/select2/) et je suis en train de faire une tâche de base.

J'ai une boîte de sélection qui a, par exemple, 3 éléments. Je veux être en mesure d'avoir à l'utilisateur de sélectionner 1 des 3 résultats ou le type de leurs propres résultat et puis finalement, sur le présenter, il soumettra la valeur est dans la boîte.

Ce que j'ai Essayé

<input style="width: 200px;" type="hidden" id="foo" />

<script type="text/javascript">
$(document).ready(function () {
        $("#foo").select2({
            query: function (query) {
                var data = { results: [{ text: 'math' }, { text: 'science' }, { text: 'english' }] };
                data.results.push({ text: query.term });
                query.callback(data);
            }
        });
    });
</script>

Le code ci-dessus me permet de voir le 3 résultats et tapez un résultat moi-même. Mais je n'arrive pas à obtenir le tapé dans le résultat de "coller" quand je clic, appuyez sur entrée ou sélectionnez le résultat que j'ai tapé juste. En va de même pour le sélectionner des options, mais je suis plus concerné par l'utilisateur saisie de texte.

Voici à quoi il ressemble:

Obtenir la saisie de l'utilisateur, de la simple boîte de sélection à l'aide de Select2

OriginalL'auteur jamez14 | 2013-09-20

  1. 7

    Le paramètre createSearchChoice permet de faire exactement ce que vous voulez. Voici un exemple:

    <script type="text/javascript">
    $("#foo").select2({
        createSearchChoice:function(term, data) {
            if ($(data).filter(function() {
                return this.text.localeCompare(term)===0; }).length===0) {
                    return {id:term, text:term};
                }
            },
        multiple: false,
        data: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}]
    });
</script>

    Prises à partir d'une question fermée à: https://github.com/ivaynberg/select2/issues/201

    Violon: http://jsfiddle.net/pHSdP/2/

    Aussi, assurez-vous d'ajouter un nom à l'entrée, sinon vous ne verrez pas la valeur à côté serveur

    <input style="width: 200px;" type="hidden" id="foo" name="foo" />

    OriginalL'auteur Daru

  2. 1

    Juste une note rapide pour quelqu'un d'autre qui est différent de l'entrée des données. Dans le cas de la console dit " ce.le texte est non définie ", assurez-vous de vérifier votre balise de texte, comme ceci:

    <script type="text/javascript">
    //Data input taken from "label", not "text" like usual
    var lstData = [{id: 0, 'label': 'story'},{id: 1, 'label': 'bug'},{id: 2, 'label': 'task'}];
    $("#foo").select2({
        createSearchChoice:function(term, data) {
            if ($(data).filter(function() {
                return this.label.localeCompare(term)===0; }).length===0) {
                    return {id:term, 'label':term};
                }
            },
        data: { results: lstData, text: 'label' }
    });
</script>

    OriginalL'auteur Duc Hong

  3. 0

    De la bibliothèque que vous utilisez est utilisé pour filtrer les options dans une boîte de sélection. Il ne prend pas de nouvelles d'entrée, conformément à leurs propres la documentation:

    Select2 est un jQuery en fonction de remplacement pour sélectionner les cases.Il prend en charge la recherche, à distance des ensembles de données et l'infini défilement des résultats.

    Je vous suggère d'utiliser jQueryUI de saisie semi-automatique ou TypeAhead

    Ceux sont juste pour le remplissage automatique d'entrée par l'utilisateur. J'espère pour autoriser les utilisateurs à un.) cliquez sur une option dans la liste déroulante. b.) type dans leur propre option au lieu de sélectionner une option --- je sais qu'il y a d'autres bibliothèques qui pourrait faire cela, mais j'aime la majorité des fonctionnalités dans Select2 le meilleur. Cet exemple montre comment il est ajouté à la liste (ivaynberg.github.io/select2/#data) mais je ne peux pas obtenir cet exemple simplement de travailler, plutôt que de répéter les utilisateurs de saisie à plusieurs reprises. Merci pour votre commentaire, si, je l'apprécie!

    OriginalL'auteur Srihari