Choisir 2 options de recherche

J'ai téléchargé Select2 jquery plug-in et ont tous mis en place - j'ai une base déroulant ici.

<SELECT NAME="GENDER">  
 <OPTION VALUE="1">MALE
 <OPTION VALUE="2">FEMALE  
 <OPTION VALUE="3">UNDEFINED
</SELECT>

J'ai appliqué le brancher et ça fonctionne - pas un problème.

J'ai fait un examen de la select2 de la documentation et de ce que je suis en train de faire, c'est plutôt de la recherche par genre, telles que taper des Femmes et des Hommes, etc - je veux que l'utilisateur de simplement appuyer sur la touche 1 ainsi, il apporte des Hommes, 2 pour les Femmes.

Quelqu'un a essayé cette select2?

OriginalL'auteur dawriter | 2014-06-03

  1. 19

    Ont un look à la "matcher" option dans la documentation: http://ivaynberg.github.io/select2/#documentation

    Remplacer le comparateur de fonction pour vérifier à la fois contre le texte() et le val() de l'option. Non testé exemple:

    $('select').select2({
  matcher: function(term, text, option) {
    return text.toUpperCase().indexOf(term.toUpperCase())>=0 || option.val().toUpperCase().indexOf(term.toUpperCase())>=0;
  }
});
    Oh bon sang..ça a fonctionné! merci!
    Le marquant comme la réponse correcte serait de me faire sentir tout chaud et floue à l'intérieur. 🙂
    Fait - merci Matt!

    OriginalL'auteur Matt

  2. 3

    Les paramètres de la "matcher" option a changé depuis que cela a été répondu. Je suis tombé sur cette même question, lors de la mise en œuvre d'un État AMÉRICAIN déroulante et chaque option a été comme <option value="PA">Pennsylvania</option> et je voulais que les utilisateurs soient capables de vouer à l'état ou il suffit de taper leur code, et il avait un travail. Basé sur la documentation mise à jour, je l'ai modifié comme ceci:

    $('select').select2({
    matcher: function(params, data) {
        //If there are no search terms, return all of the data
        if ($.trim(params.term) === '') { return data; }

        //Do not display the item if there is no 'text' property
        if (typeof data.text === 'undefined') { return null; }

        //`params.term` is the user's search term
        //`data.id` should be checked against
        //`data.text` should be checked against
        var q = params.term.toLowerCase();
        if (data.text.toLowerCase().indexOf(q) > -1 || data.id.toLowerCase().indexOf(q) > -1) {
            return $.extend({}, data, true);
        }

        //Return `null` if the term should not be displayed
        return null;
    }
});

    Ici, c'est un travail CodePen démo, je l'ai fouettée qui illustre ce en utilisant à la fois l'OP sélectionnez le champ et sélectionnez le champ de l'états des états-unis.

    OriginalL'auteur Tessa

  3. 0

    J'ai pris @Tessa est grande la réponse ci-dessus et de le faire fonctionner avec optGroup.

    function(params, option) {
    //If there are no search terms, return all of the option
    var searchTerm = $.trim(params.term);
    if (searchTerm === '') { return option; }

    //Do not display the item if there is no 'text' property
    if (typeof option.text === 'undefined') { return null; }

    var searchTermLower = searchTerm.toLowerCase(); //`params.term` is the user's search term

    //`option.id` should be checked against
    //`option.text` should be checked against
    var searchFunction = function(thisOption, searchTerm) {
        return thisOption.text.toLowerCase().indexOf(searchTerm) > -1 ||
            (thisOption.id && thisOption.id.toLowerCase().indexOf(searchTerm) > -1);
    };

    if (!option.children) {
        //we only need to check this option
        return searchFunction(option, searchTermLower) ? option : null;
    }

    //need to search all the children
    option.children = option
        .children
        .filter(function (childOption) {
            return searchFunction(childOption, searchTermLower);
        });
    return option;
}

    OriginalL'auteur jhilden