Javascript jquery on search filter-wrap<；optgroup>；如果没有<；选项>；匹配项[Safari浏览器]

此代码工作正常，但问题在于

optgroup

似乎没有找到任何结果

选项

获取

$.wrap（）

，但如果没有找到结果，我无法包装

optgroup

$（'.search'）.on（'keyup keydown'，function（））{
searchFilter（$（this.val（））；
});
函数搜索筛选器（值）{
$（'option'）。每个（函数（）{
if（$（this）.text（）.toLowerCase（）.indexOf（value.toLowerCase（））>=0）{
$（this.removeClass（'hidden'）；
$（this.removeAttr（'disabled'）；
if（$（this）.parent（）是（'span'））{
$（此）。展开（“”）；
}
}否则{
$（this.addClass（'hidden'）；
$（this.prop（'disabled'，true）；
如果（！$（this）.parent（）是（'span'））{
$（此）.wrap（“”）；
}
}
});
}

。隐藏{
显示：无！重要；
}

汽车
自行车
周期
橙色
苹果
菠萝

删除

您的
搜索过滤器
功能
第13行

所以结果


$（'.search'）.on（'keyup keydown'，function（））{
searchFilter（$（this.val（））；
});
函数搜索筛选器（值）{
$（'option'）。每个（函数（）{
if（$（this）.text（）.toLowerCase（）.indexOf（value.toLowerCase（））>=0）{
$（this.removeClass（'hidden'）；
$（this.removeAttr（'disabled'）；
if（$（this）.parent（）是（'span'））{
$（此）。展开（“”）；
}
}否则{
$（this.addClass（'hidden'）；
$（this.prop（'disabled'，true）；
if（$（this）.parent（）是（'span'））{
$（此）.wrap（“”）；
}
}
});
}
。隐藏{
显示：无！重要；
}

汽车
自行车
周期
橙色
苹果
菠萝
隐藏
optgroup
和
选项
可能不是办法，即使是用
span
包装。当我在Safari mobile中测试它时，
中的包装不起作用

更好的选择是从下拉列表中删除不需要的项目。在执行此操作时，您需要创建原始下拉列表的克隆，以便有初始状态的记录


$（文档）.ready（函数（）{
//添加隐藏的克隆
var clone=$（“#花式”）.clone（true）；
clone.attr（“id”，“fancy_clone”）；
css（“显示”、“无”）；
$（“正文”）。附加（克隆）；
$（'.search'）。在（'keyup'，function（）上{
searchFilter（$（this.val（））；
});
函数搜索筛选器（值）{
//需要一个工作克隆-将我们的克隆保留为原始记录
var workingClone=$（“#fancy_clone”）.clone（true）；
$（“#幻想”）.empty（）；
//删除不需要的选项
$（workingClone）.find（“选项”）.each（函数（）{
if（$（this.val（）.toLowerCase（）.indexOf（value.toLowerCase（））=-1）{
var thisParent=$（this.parents（“optgroup”）；
$（this.remove（）；
//如果optgroup为空，请将其删除
if（$（thisParent）.children（“选项”）.length==0）{
$（thisParent.remove（）；
}
}
});
//更新实际选择值
$（“#fancy”）.append（$（workingClone.html（））；
}
});

汽车
自行车
周期
橙色
苹果
菠萝
我搜索的时间太长，从我的上级那里得到了解决。最终得到了这个解决方案。
谢谢你的帮助


$（'.search'）.on（'keyup keydown'，function（））{
searchFilter（$（this.val（））；
});
函数搜索筛选器（值）{
$（'option'）。每个（函数（）{
if（$（this）.text（）.toLowerCase（）.indexOf（value.toLowerCase（））>=0）{
$（this.removeClass（'hidden'）；
$（this.removeAttr（'disabled'）；
if（$（this）.parent（）是（'span'））{
$（此）。展开（“”）；
}
}否则{
$（this.addClass（'hidden'）；
$（this.prop（'disabled'，true）；
如果（！$（this）.parent（）是（'span'））{
$（此）.wrap（“”）；
}
}
});
$（'optgroup'）。每个（函数（）{
var qq=$（this）.find（'span选项'）.length；
var len=$（this）.find（'option'）.length；
if（$（this）.parent（）是（'span'））{
$（此）。展开（“”）；
}
if（qq==len）{
$（此）.wrap（“”）；
}
});
}
。隐藏{
显示：无！重要；
}

汽车
自行车
周期
橙色
苹果
菠萝
为什么要使用
span
？@AswinKumar我提到了Safari浏览器的问题，在Safari中，我们不能仅仅通过应用
显示：无
来隐藏
选项
或
选项组
，这需要
$.wrap（）
一个html标记来隐藏它。请注意，
span
不是
select
的有效子项，因此无论如何，用
span
包装
optgroup
都不能保证得到一致的结果。请参阅@JonP，我知道，但我发现safari浏览器中没有隐藏它的选项。朋友，它甚至不在代码段中工作，请仔细阅读我的问题。