jquery для поискового фильтра - wrap < optgroup > если нет < option > соответствует [браузер Safari]

После некоторого googling я обнаружил, что при подключении к SQLite плохо использовать разные соединения. См.

http://touchlabblog.tumblr.com/post/24474398246/android-sqlite-locking

Установите максимальную мощность пула в 1 и попробуйте .

0
задан wasimv09 12 March 2019 в 05:09
поделиться

3 ответа

Скрытие optgroups и options, вероятно, не лучший путь, даже если заключить в span. Обтекание в <span style="disaply:none"> не работает, когда я тестировал его в Safari Mobile.

Ваш лучший вариант - убрать ненужные предметы из выпадающего списка. При этом вы захотите создать клон исходного выпадающего списка, чтобы была запись начального состояния.

$(document).ready(function() {
  //Add a hidden clone
  var clone = $("#fancy").clone(true);
  clone.attr("id", "fancy_clone");
  clone.css("display", "none");
  $("body").append(clone);

  $('.search').on('keyup', function() {
    searchFilter($(this).val());
  });

  function searchFilter(value) {
    //Need a working clone - keep our clone as the original record
    var workingClone = $("#fancy_clone").clone(true);
    $("#fancy").empty();

    //Remove unwanted options
    $(workingClone).find("option").each(function() {
      if ($(this).val().toLowerCase().indexOf(value.toLowerCase()) === -1) {
        var thisParent = $(this).parents("optgroup");
        $(this).remove();

        //remove optgroup if it is empty
        if ($(thisParent).children("option").length === 0) {
          $(thisParent).remove();
        }
      }
    });

    //UPdate the actual select
    $("#fancy").append($(workingClone).html());
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<input type="text" class="search" />
<select id="fancy">
  <optgroup label="test01">
    <option value="car">car</option>
    <option value="bike">bike</option>
    <option value="cycle">cycle</option>
  </optgroup>
  <optgroup label="test02">
    <option value="orange">orange</option>
    <option value="apple">apple</option>
    <option value="pinapple">pineapple</option>
  </optgroup>
</select>

0
ответ дан Jon P 12 March 2019 в 05:09
поделиться

Я ищу слишком долго, и получил решение от моего старшего. в конечном итоге с этим решением. спасибо за вашу помощь

$('.search').on('keyup keydown', function(){
  searchFilter($(this).val());
});

function searchFilter(value){
  $('option').each(function(){
    if($(this).text().toLowerCase().indexOf(value.toLowerCase()) >= 0){
      $(this).removeClass('hidden');
      $(this).removeAttr('disabled');
      
      if($(this).parent().is('span')){
        $(this).unwrap('<span>');
      }
    }else{
      $(this).addClass('hidden');
      $(this).prop('disabled', true);
      
      if(!$(this).parent().is('span')){
        $(this).wrap('<span>');
      }
    }
  });
  $('optgroup').each(function () {
    var qq = $(this).find('span option').length;
    var len = $(this).find('option').length;
    if ($(this).parent().is('span')) {
        $(this).unwrap('<span>');
    }
    if (qq == len) {
        $(this).wrap('<span>');
    }
  });
}
.hidden{
  display: none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" class="search" />

<div class="row">
  <select multiple style="width: 150px;height:200px" id="search">
    <optgroup label="test01">
      <option>car</option>
      <option>bike</option>
      <option>cycle</option>
    </optgroup>
    <optgroup label="test02">
      <option>orange</option>
      <option>apple</option>
      <option>pineapple</option>
    </optgroup>
  </select>
</div>

0
ответ дан wasimv09 12 March 2019 в 05:09
поделиться

Удалите ! вашу searchFilter функциональную строку 13

Таким образом, результат

$('.search').on('keyup keydown', function(){
  searchFilter($(this).val());
});

function searchFilter(value){
  $('option').each(function(){
    if($(this).text().toLowerCase().indexOf(value.toLowerCase()) >= 0){
      $(this).removeClass('hidden');
      $(this).removeAttr('disabled');
      
      if($(this).parent().is('span')){
        $(this).unwrap('<span>');
      }
    }else{
      $(this).addClass('hidden');
      $(this).prop('disabled', true);
      
      if($(this).parent().is('span')){
        $(this).wrap('<span>');
      }
    }
  });
}
.hidden{
  display: none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" class="search" />

<div class="row">
  <select multiple style="width: 150px;height:200px" id="search">
    <optgroup label="test01">
      <option>car</option>
      <option>bike</option>
      <option>cycle</option>
    </optgroup>
    <optgroup label="test02">
      <option>orange</option>
      <option>apple</option>
      <option>pineapple</option>
    </optgroup>
  </select>
</div>
[ 119]
0
ответ дан ahmeticat 12 March 2019 в 05:09
поделиться
Другие вопросы по тегам:

Похожие вопросы: