layui.autocomplete 如何把数据源写在前端并可以筛选

前端开发中，可以使用 layui 的 autocomplete 组件从前端数据源进行筛选。下面是一个简单的示例代码：

HTML 代码：

<div class="layui-inline">
  <input type="text" name="search" id="search" autocomplete="off" class="layui-input" placeholder="请输入搜索关键字">
</div>

JavaScript 代码：

// 模拟数据源
var data = [
  {value: "java", title: "Java"},
  {value: "javascript", title: "JavaScript"},
  {value: "python", title: "Python"},
  {value: "php", title: "PHP"},
  {value: "c++", title: "C++"},
  {value: "html", title: "HTML"},
  {value: "css", title: "CSS"}
];

// 初始化 autocomplete 组件
layui.use(['form', 'autocomplete'], function(){
  var form = layui.form;
  var autocomplete = layui.autocomplete;
  
  // 渲染 autocomplete 组件
  autocomplete.render({
    elem: '#search', // 绑定元素
    data: data, // 数据源
    filterKey: ['value', 'title'], // 筛选的键名
    template: function(item){ // 模板函数
      return item.title + '(' + item.value + ')';
    },
    onSelect: function(data){ // 选中回调函数
      console.log(data);
    }
  });
});

在上述代码中，我们定义了一个模拟的数据源 `data`，然后在 `autocomplete` 组件中使用了 `data` 作为数据源，并设置了筛选的键名为 `value` 和 `title`。在模板函数中，我们定义了每个选项的显示格式，最后在选中回调函数中打印了选中的数据。

通过这种方式，我们可以方便地在前端进行数据筛选，并得到用户选择的结果。