После некоторого googling я обнаружил, что при подключении к SQLite плохо использовать разные соединения. См.
http://touchlabblog.tumblr.com/post/24474398246/android-sqlite-locking
Установите максимальную мощность пула в 1 и попробуйте .
Скрытие 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>
Я ищу слишком долго, и получил решение от моего старшего. в конечном итоге с этим решением. спасибо за вашу помощь
$('.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>
Удалите !
вашу 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>