javascript get - Wie man Optionen von<select>mit jQuery dynamisch filtert?



selected value (9)

Ich hatte ein ähnliches Problem, also änderte ich die akzeptierte Antwort, um eine allgemeinere Version der Funktion zu erstellen. Ich dachte, ich würde es hier lassen.

var filterSelectOptions = function($select, callback) {

    var options = null,
        dataOptions = $select.data('options');

    if (typeof dataOptions === 'undefined') {
        options = [];
        $select.children('option').each(function() {
            var $this = $(this);
            options.push({value: $this.val(), text: $this.text()});
        });
        $select.data('options', options);
    } else {
        options = dataOptions;
    }

    $select.empty();

    $.each(options, function(i) {
        var option = options[i];
        if(callback(option)) {
            $select.append(
                $('<option/>').text(option.text).val(option.value)
            );
        }
    });
};
<select >
<option value="something">something</option>
<option value="something_else">something else</option>
</select>
<input type="text" >

Wenn der Benutzer etwas eingibt, werden nur Optionen angezeigt, deren Wert der Eingabe entspricht.


Sie können das select2-Plugin zum Erstellen eines solchen Filters verwenden. Mit dieser Menge an Coding-Arbeit kann vermieden werden. Sie können das Plugin von https://select2.github.io/

Dieses Plugin ist sehr einfach anzuwenden und sogar fortgeschrittene Arbeit kann leicht damit erledigt werden. :)


Viel einfacher Code als die meisten anderen Lösungen. Suchen Sie nach dem Text (ohne Beachtung der Groß- / Kleinschreibung), und verwenden Sie CSS, um den Inhalt ein- / auszublenden. Viel besser als eine Kopie der Daten zu speichern.

Übergeben Sie in diese Methode die ID des Auswahlfelds und die ID der Eingabe, die einen Filter enthält.

function FilterSelectList(selectListId, filterId)
{
    var filter = $("#" + filterId).val();
    filter = filter.toUpperCase();

    var options = $("#" + selectListId + " option");
    for (var i = 0; i < options.length; i++)
    {
       if (options[i].text.toUpperCase().indexOf(filter) < 0)
           $(options[i]).css("display", "none");
       else
           $(options[i]).css("display", "block");
    }
};

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script language='javascript'>
jQuery.fn.filterByText = function(textbox, selectSingleMatch) {
  return this.each(function() {
    var select = this;`enter code here`
    var options = [];
    $(select).find('option').each(function() {
      options.push({value: $(this).val(), text: $(this).text()});
    });
    $(select).data('options', options);
    $(textbox).bind('change keyup', function() {
      var options = $(select).empty().scrollTop(0).data('options');
      var search = $.trim($(this).val());
      var regex = new RegExp(search,'gi');

      $.each(options, function(i) {
        var option = options[i];
        if(option.text.match(regex) !== null) {
          $(select).append(
             $('<option>').text(option.text).val(option.value)
          );
        }
      });
      if (selectSingleMatch === true && 
          $(select).children().length === 1) {
        $(select).children().get(0).selected = true;
      }
    });
  });
};

  $(function() {
     $('#selectorHtmlElement').filterByText($('#textboxFiltr2'), true);
  });
</script>

Dies ist eine einfache Lösung, bei der Sie die Listenoptionen klonen und sie später für die Wiederherstellung in einem Objekt behalten. Die Skripts bereinigen die Liste und fügen nur die Optionen hinzu, die den Eingabetext enthalten. Dies sollte auch Cross-Browser funktionieren. Ich habe Hilfe von diesem Beitrag erhalten: https://.com/a/5748709/542141

Html

<input id="search_input" placeholder="Type to filter">
<select id="theList" class="List" multiple="multiple">

oder Rasiermesser

@Html.ListBoxFor(g => g.SelectedItem, Model.items, new { @class = "List", @id = "theList" })

Skript

<script type="text/javascript">
  $(document).ready(function () {
    //copy options
    var options = $('#theList option').clone();
    //react on keyup in textbox
    $('#search_input').keyup(function () {
      var val = $(this).val();
      $('#theList').empty();
      //take only the options containing your filter text or all if empty
      options.filter(function (idx, el) {
        return val === '' || $(el).text().indexOf(val) >= 0;
      }).appendTo('#theList');//add it to list
     });
  });
</script>

Etwas anders als alle anderen, aber ich denke, das ist das Einfachste:

$(document).ready(function(){

    var $this, i, filter,
        $input = $('#my_other_id'),
        $options = $('#my_id').find('option');

    $input.keyup(function(){
        filter = $(this).val();
        i = 1;
        $options.each(function(){
            $this = $(this);
            $this.removeAttr('selected');
            if ($this.text().indexOf(filter) != -1) {
                $this.show();
                if(i == 1){
                    $this.attr('selected', 'selected');
                }
                i++;
            } else {
                $this.hide();
            }
        });
    });

});

Aktualisieren Sie Lessans Antwort, um auch die Attribute der Optionen beizubehalten.

Dies ist meine erste Antwort auf , also bin ich mir nicht sicher, ob ich seine Antwort bearbeiten oder meine eigene schreiben soll.

jQuery.fn.allAttr = function() {
  var a, aLength, attributes, map;
  if (!this[0]) return null;
  if (arguments.length === 0) {
    map = {};
    attributes = this[0].attributes;
    aLength = attributes.length;
    for (a = 0; a < aLength; a++) {
      map[attributes[a].name.toLowerCase()] = attributes[a].value;
    }
    return map;
  } else {
    for (var propin arguments[0]) {
      $(this[0]).attr(prop, arguments[0][prop]);
    }
    return this[0];
  }
};


jQuery.fn.filterByText = function(textbox) {
  return this.each(function() {
    var select = this;
    var options = [];
    $(select).find('option').each(function() {
      options.push({ value: $(this).val(), 
        text: $(this).text(), 
        allAttr: $(this).allAttr() });
    });
    $(select).data('options', options);

    $(textbox).bind('change keyup', function() {
      var search = $.trim($(this).val());
      var regex = new RegExp(search, "gi");

      $.each($(select).empty().data('options'), function(i, option) {
        if (option.text.match(regex) !== null) {
          $(select).append(
            $('<option>').text(option.text)
            .val(option.value)
            .allAttr(option.allAttr)
          );
        }
      });
    });
  });
};

Ich bin nicht sicher, warum Sie mehr als eine Option mit dem gleichen Wert haben, aber das funktioniert

$(document).ready(function() {
  $('input').change(function() {
    var filter = $(this).val();
    $('option').each(function() {
      if ($(this).val() == filter) {
        $(this).show();
      } else {
        $(this).hide();
      }
      $('select').val(filter);
    })
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
   <option value="something1">something1</option>
   <option value="something1">something1</option>
   <option value="something2">something2</option>
   <option value="something2">something2</option>
   <option value="something2">something2</option>
   <option value="something3">something3</option>
   <option value="something3">something3</option>
   <option value="something3">something3</option>
</select>
<input type="text" placeholder="something1">


$('html, body').animate({scrollTop: 
  Math.min( 
    $(to).offset().top-margintop, //margintop is the margin above the target
    $('body')[0].scrollHeight-$('body').height()) //if the target is at the bottom
}, 2000);




javascript jquery dom