给出一个前端页面以及数据文本，其中功能需求为：一个类似于百度搜索的功能，输入字符串，对应下拉框显示相关内容的列表，在下拉框中可以选中需要的内容，其中搜索数据是从数据文本中解析出来的，注意必须先解析出来数据，然后再搜索匹配内容，不然容易异步搜索不出来，给出相应的代码

以下是一个简单的示例代码，实现了一个基本的搜索功能：

HTML代码：

<div>
  <input type="text" id="search-input" placeholder="请输入搜索内容">
  <ul id="search-list"></ul>
</div>

JavaScript代码：

// 模拟数据文本
const data = [
  { id: 1, name: '苹果', category: '水果' },
  { id: 2, name: '香蕉', category: '水果' },
  { id: 3, name: '猕猴桃', category: '水果' },
  { id: 4, name: '西红柿', category: '蔬菜' },
  { id: 5, name: '黄瓜', category: '蔬菜' },
  { id: 6, name: '土豆', category: '蔬菜' },
];

const searchInput = document.getElementById('search-input');
const searchList = document.getElementById('search-list');

// 监听输入框输入事件
searchInput.addEventListener('input', () => {
  // 获取输入框的值
  const value = searchInput.value;
  // 清空列表
  searchList.innerHTML = '';
  
  // 如果输入框没有值，直接返回
  if (!value) {
    return;
  }
  
  // 解析数据，过滤出匹配的数据
  const result = data.filter(item => {
    return item.name.includes(value) || item.category.includes(value);
  });
  
  // 如果没有匹配的数据，直接返回
  if (!result.length) {
    return;
  }
  
  // 渲染列表
  result.forEach(item => {
    const li = document.createElement('li');
    li.innerText = item.name;
    li.addEventListener('click', () => {
      // 选中搜索结果
      searchInput.value = item.name;
      // 清空列表
      searchList.innerHTML = '';
    });
    searchList.appendChild(li);
  });
});

以上代码实现了一个基本的搜索功能，用户输入内容后，会根据输入的内容从数据文本中解析出匹配的数据，然后在下拉框中显示出来，用户可以选择需要的内容。