写一个不用vue.js 的表单模糊查询

以下是一个使用原生JavaScript实现的表单模糊查询示例：

HTML代码：

<form>
  <label for="search-input">搜索：</label>
  <input type="text" id="search-input" name="search-input" />
  <button type="submit">搜索</button>
</form>

<ul id="results"></ul>

JavaScript代码：

const form = document.querySelector('form');
const input = document.querySelector('#search-input');
const resultsList = document.querySelector('#results');

form.addEventListener('submit', function(event) {
  event.preventDefault();
  const query = input.value.toLowerCase();
  const items = document.querySelectorAll('.item');

  resultsList.innerHTML = '';

  items.forEach(function(item) {
    const title = item.querySelector('.title').textContent.toLowerCase();
    const description = item.querySelector('.description').textContent.toLowerCase();

    if (title.indexOf(query) !== -1 || description.indexOf(query) !== -1) {
      resultsList.appendChild(item.cloneNode(true));
    }
  });
});

// 示例数据
const itemsData = [
  {
    title: 'HTML',
    description: 'HTML 是用来描述网页的一种语言。'
  },
  {
    title: 'CSS',
    description: 'CSS 是用来为网页添加样式的一种语言。'
  },
  {
    title: 'JavaScript',
    description: 'JavaScript 是一种编程语言，可用于创建交互式网页应用程序。'
  }
];

// 动态创建示例数据的 HTML
const itemsHtml = itemsData.map(function(itemData) {
  return `
    <li class="item">
      <h2 class="title">${itemData.title}</h2>
      <p class="description">${itemData.description}</p>
    </li>
  `;
}).join('');

// 将示例数据的 HTML 插入到文档中
resultsList.innerHTML = itemsHtml;

这个示例中，我们首先注册了一个表单提交事件监听器，然后在表单提交时获取了用户输入的查询字符串，并在所有项目标题和描述中查找匹配的项。如果找到匹配项，就将其克隆并添加到结果列表中。最后，我们使用示例数据动态创建了一些项目，并将它们插入到文档中。