<script>
layui.use(function(){
var dropdown = layui.dropdown;
var $ = layui.$;
// 渲染
var inst = dropdown.render({
elem: '#ID-dropdown-demo-reloadData',
data: [
{ id: 1, title: "Python" },
{ id: 2, title: "JavaScript" },
{ id: 3, title: "Java" },
{ id: 4, title: "C++" },
{ id: 5, title: "PHP" },
{ id: 6, title: "Ruby" },
{ id: 7, title: "Swift" },
{ id: 8, title: "TypeScript" },
{ id: 9, title: "Kotlin" },
{ id: 10, title: "Go" }
],
style: 'min-width: 190px; box-shadow: 1px 1px 11px rgb(0 0 0 / 11%);',
click: function(data){
this.elem.val(data.title);
}
});
// 输入框输入事件
$(inst.config.elem).on('input propertychange', function(){
var elem = $(this);
var value = elem.val().trim();
// 匹配到对应内容时，重载数据
var dataNew = inst.config.data.filter(function(item){
var exp = new RegExp(value.split('').join('|'), 'i');
return exp.test(item.title);
});
dropdown.reloadData(inst.config.id, {
data: dataNew, // 匹配到的新数据
templet: function(d){
var exp = new RegExp(value.split('').join('|'), 'gi');
return d.title.replace(exp, function (str) {
return '
' + str + ''
});
}
});
});
});
</script>
