html书签展示(带搜索)

HTML书签展示（带搜索）

HTML书签是一种很方便的方式，可以让我们将常用的网页链接保存起来，方便随时查看。在传统的浏览器中，我们可以通过书签栏或书签菜单来展示我们保存的书签。但是，随着互联网的发展，我们的书签数量可能越来越多，如果需要快速找到某个特定的书签就可能变得困难。因此，为HTML书签添加搜索功能，可以使我们更加方便地管理和查找书签。

在这篇文章中，我将介绍如何通过使用HTML、CSS和JavaScript来实现一个可搜索的HTML书签展示。

首先，我们需要建立一个基本的HTML结构来展示书签。我们可以使用无序列表（`

`）来表示书签列表，每个书签使用列表项（`
• `）表示。每个列表项包含书签的标题和链接。

  ```html

  ```

  接下来，我们需要为书签列表添加样式，以此定义书签的外观。我们可以添加一个CSS文件（styles.css），在其中定义书签的样式。

  ```css

  body {

  font-family: Arial, sans-serif;

  }

  ul {

  list-style-type: none;

  padding: 0;

  }

  li {

  margin-bottom: 10px;

  }

  a {

  text-decoration: none;

  color: #333;

  }

  a:hover {

  text-decoration: underline;

  }

  #searchInput {

  margin-bottom: 10px;

  }

  ```

  到目前为止，我们已经定义了书签列表的结构和样式。接下来，我们需要为搜索功能添加一些JavaScript代码。

  ```javascript

  const searchInput = document.getElementById('searchInput');

  const bookmarkList = document.getElementById('bookmarkList');

  const bookmarks = [

  { title: 'Google', url: 'https://www.google.com' },

  { title: 'Baidu', url: 'https://www.baidu.com' },

  { title: 'Bing', url: 'https://www.bing.com' },

  { title: 'Yahoo', url: 'https://www.yahoo.com' },

  { title: 'GitHub', url: 'https://www.github.com' }

  ];

  function displayBookmarks(bookmarks) {

  bookmarkList.innerHTML = '';

  bookmarks.forEach(bookmark => {

  const li = document.createElement('li');

  const a = document.createElement('a');

  a.href = bookmark.url;

  a.textContent = bookmark.title;

  li.appendChild(a);

  bookmarkList.appendChild(li);

  });

  }

  displayBookmarks(bookmarks);

  searchInput.addEventListener('input', () => {

  const searchText = searchInput.value.toLowerCase();

  const filteredBookmarks = bookmarks.filter(bookmark => bookmark.title.toLowerCase().includes(searchText));

  displayBookmarks(filteredBookmarks);

  });

  ```

  上述代码中，我们首先定义了一个包含书签信息的数组（`bookmarks`）。然后，我们定义了一个`displayBookmarks`函数，用于将书签显示在页面上。函数遍历书签数组，并为每个书签创建一个列表项，并将其添加到书签列表中。

  接着，我们将定义一个事件监听器，监听`searchInput`的输入事件。每当用户在搜索框中输入内容时，监听器将会执行。在监听器中，我们获取用户输入的搜索文本，并通过过滤数组的方式，找出包含搜索文本的书签，并将其传递给`displayBookmarks`函数以进行展示。

  到此为止，我们已经完成了一个带有搜索功能的HTML书签展示。用户可以通过在搜索框中输入文本来查找特定的书签，搜索结果会实时显示在书签列表中。

  总结起来，通过使用HTML、CSS和JavaScript，我们可以为HTML书签添加搜索功能，以便更方便地管理和查找书签。我们通过定义HTML结构、样式和JavaScript代码，实现了一个可搜索的HTML书签展示。这个小应用可以帮助我们更高效地管理和使用我们保存的书签。