layui/docs/dropdown/examples/reloadData.md

<div class="layui-form">
  <div class="layui-form-item">
    <label class="layui-form-label">输入时重载</label>
    <div class="layui-input-inline">
      <input type="text" autocomplete="off" placeholder="输入关键字" class="layui-input" id="ID-dropdown-demo-reloadData">
    </div>
  </div>
</div>

<!-- import layui --> 
<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 '<span style="color: red;">' + str + '</span>'
        });
      }
    });
  });
});
</script>