web-dev-qa-db-fra.com

Jquery: filtrer la liste déroulante lors de la frappe

J'ai utilisé un plugin prototype qui filtre le contenu d'une liste déroulante lors de la frappe. Ainsi, par exemple, si vous avez tapé "chat" dans la zone de texte, seuls les éléments contenant la sous-chaîne "chat" resteraient comme options dans la liste déroulante.

Est-ce que quelqu'un connaît un plugin jquery qui peut le faire?

javascriptjqueryjquery-plugins
35
Robin Barnes

J'ai écrit n petit script pour le faire il y a quelques années. Il pourrait être mis sous forme de plug-in jQuery assez facilement, probablement. Vous y êtes les bienvenus.

Je le fais également dans mon PHP Function Reference Widget Dashboard si vous voulez y regarder le code.

27
Andrew Hedges

Je cherchais juste quelque chose de similaire, et le meilleur pour ce dont j'ai besoin semble être le JQuery UI MultiSelect . Il transforme les boîtes de sélection multiple en une vue à double liste assez élégante, avec un filtrage en direct sur la liste principale.

EDIT: Nouveau développement!

" Choisi est un plugin JavaScript qui rend les boîtes de sélection longues et lourdes beaucoup plus conviviales. Il est actuellement disponible dans les versions jQuery et Prototype."

J'utilise totalement Chosen sur tous les projets à utilisation sélective dans un avenir prévisible.

52
Ed Brannin

Select2 est un fork assez récent de Chosen et a des tonnes de fonctionnalités supplémentaires (par exemple AJAX + HTML personnalisé pour les éléments individuels).

28
ifarted

Vérifiez ces plugins:

12
CMS

jQuery autocomplete plugin

EDIT: J'ai initialement lié au mauvais plugin de saisie semi-automatique.

9
karim79
$(document).ready(function() {
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#filter *").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<h2>Filter</h2>
<input id="myInput" type="text" placeholder="Search..">
<br><br>
<div class="filter-by">
  <span>Filter by:</span>
  <select class="status-filter" id="filter">
    <option value="">All</option>
    <option value="paid">Paid</option>
    <option value="accepted">Accepted</option>
    <option value="pending">Pending</option>
    <option value="rejected">Rejected</option>
    </select>
</div>
4
Vijay Makwana

Je viens de mettre en œuvre cette fonctionnalité rapidement et sale. Il utilise certaines variables globales, vous souhaiterez peut-être améliorer la mise en œuvre pour les supprimer.

Ici, "#xsca_member_filter" est le filtre en tant qu'entrée de texte et "#members" est l'entrée de sélection.

$('documenet').ready(function(){
    init();
   $('#xsca_member_filter').keyup(function(){
       filter($(this));
   });
});

//save all available options with their values and the empty option.
init = function(){
    options = new Object();
    $('#owner option').each(function(){
        var obj = $(this);
        if(obj.attr("value") != "")
            options[obj.attr('value')] = obj.html();
        else
            emptyOption = obj.html();
    });
    selObj = $('#owner');
};

filter = function(elem){
    var filter = elem.val();
    var selected = $('#owner option:selected').val();

    //delete all options and add the empty option
    selObj.html("");
    selObj.append("<option> "+emptyOption+" </option>");

    //add all options conaining the filter string
    for(value in options){
        var option = options[value];
        if((options[value]).indexOf(filter) != -1){
            selObj.append("<option value='"+value+"'> "+options[value]+" </option>");
        }
    }

    //select the previously selected option
    $("#owner option[value = '"+selected+"']").prop("selected", true);
}
1
Oskar

Essayez le "filtre d'options jquery", basé sur une boîte de sélection réelle et une correspondance au milieu des textes d'options: http://plugins.jquery.com/project/jquery_options_filter

pour le diyisme

1
diyism