在当今充满活力的网络开拓领域中，实现强大的搜索功能是一个关键特性，可以极大地增强用户体验，并使浏览大型数据集变得轻松自若。如果您想要为您的网站或网络运用程序添加实时搜索功能，那么您来对地方了。本篇全面的文章将磋商利用JavaScript实现实时搜索功能的方方面面。
无论您是履历丰富的开拓职员还是刚开始编码之旅的新手，本文旨在为您供应一样平常编码知识和工具，以便将实时搜索功能融入到您的项目中。通过本指南的学习，您将对干系观点和技能有踏实的理解，从而能够创建相应式和交互式的搜索功能，实现用户输入时动态更新的效果。
（图片来自网络侵删）为了有效地跟随本指南，建议您对HTML、CSS和JavaScript的基本知识有踏实的理解。熟习DOM操作和事宜处理将有助于我们深入理解实现细节。然而，纵然您对JavaScript或Web开拓相对较新，本指南的构造也旨在供应清晰的阐明和逐步的解释，使实在用于不同技能水平的学习者。
现在，为了更好地理解这个功能的主要性和利用方法，我们将创建一个非常基本的项目作为示例；更详细地说，一个如下所示的电影运用程序：
您可以在这里查看实时履行情形。
https://search-movies-live.netlify.app/
在这个项目中，我们将利用实时搜索功能来搜索电影数据库中的电影列表。我知道你迫不及待地想要开始了，我们立时就会开始。但首先，让我们更多地理解一下实时搜索功能及其主要性。
实时搜索功能的主要性在当今数字化的环境中，实时搜索功能变得至关主要，知足了高效信息检索的需求，提升了整体用户体验。通过在用户输入时实时更新搜索结果，实时搜索供应即时反馈，便于快速获取干系信息。这种动态交互式的搜索功能带来了许多好处，利用户和网站所有者受益。
改进的用户体验：实时搜索通过供应无缝和直不雅观的搜索过程显著提升了用户体验。当用户开始输入查询时，搜索结果会实时更新，供应即时反馈，肃清了手动提交或页面刷新的需求。这种互动性节省了用户宝贵的韶光和精力，从而实现了更高效和令人满意的搜索体验。更快的信息检索：通过实时搜索，用户可以快速找到所需的信息，无需浏览多个页面或等待搜索结果加载。随着用户的输入，搜索结果立即缩小范围，显示干系建议，无需输入完全的搜索查询。这种速率和相应能够利用户在传统搜索方法所需韶光的一小部分内找到他们想要的内容。增加参与度和转化率：实时搜索的无缝和相应性特性鼓励用户更积极地与网站或网络运用程序互动。供应即时反馈和干系建议可以保持用户的参与度，减少跳出率和沮丧感的可能性。这种增加的参与度可以提高转化率，由于用户更有可能进一步探索网站并将他们的搜索意图转化为行动。增强的过滤和细化功能：实时搜索功能常日包括额外的功能，如过滤器、建媾和自动完成选项。这些功能帮助用户细化搜索并缩小结果范围，使他们能够找到他们想要的内容。通过供应这些工具，实时搜索不仅改进了搜索体验，还帮助用户创造可能一开始没有考虑到的干系内容或产品。网站所有者的宝贵见地：实时搜索功能可以为用户行为和偏好供应宝贵的见地。通过剖析搜索查询和模式，网站所有者可以更好地理解用户的需求，识别盛行趋势或话题，并在内容创作、产品供应或用户界面改进方面做出明智决策。这些见地使网站所有者能够根据用户需求量身定制自己的产品，从而提高客户满意度和业务增长。设置HTML构造既然我们已经完备理解了实时搜索功能以及它的主要性，那么让我们深入磋商一下如何在您自己的项目中实现这个功能。
首先，让我们建立项目的构造。对付这个项目，我们只须要三个文件，即HTML、CSS和JavaScript文件。
现在让我们开始设置项目的HTML构造：在HTML文件中，我们首先须要包含我们的标准HTML样板，包括链接和脚本到我们的CSS和JS文件中：
<!doctype html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="./live-search.css" /> <title> </title> </head> <body> <script src="./live-search.js"></script> </body></html>现在在 body 标签中，我们包含了 header 和 main 语义标签。在 header 标签内，我们设置了项目的标题部分，这里只包括运用程序的名称和一个视频图标。
<header> <ion-icon name="videocam"></ion-icon> <h1>Search Movies</h1></header>在我们连续讲解 main 标签之前，在 body 标签的末端，让我们包含所需的 script 标签，以便能够利用这些图标：
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script><script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>您可以在Ionicons网站上找到这些图标。
https://ionic.io/ionicons
现在，在 main 标签内，我们将包含我们的第一个 div 标签，这将是我们的搜索栏容器，在个中，我们放置我们的搜索输入标签和一个搜索图标：
<div id="search-container"> <ion-icon name="search-outline"></ion-icon> <input type="search" id="search-bar" placeholder="Search movies..." /></div>然后，我们将在这个“div”下面创建另一个 div 标签。这将包含所有电影数据的结果：
<div id="results-container"></div>我们暂时将其留空，由于其内容将在JavaScript部分天生。
末了，在 main 标签中，我们将包含一个 p 标签。这个标签只是为了在稍后向用户显示缺点或空的相应。
<p id="movie-unavailable-txt"></p>这便是HTML文件的全部内容，整体代码该当是这样的：
<!doctype html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="./live-search.css" /> <title>Live Search Functionality</title> </head> <body> <header> <ion-icon name="videocam"></ion-icon> <h1>Search Movies</h1> </header> <main> <div id="search-container"> <ion-icon name="search-outline"></ion-icon> <input type="search" id="search-bar" placeholder="Search movies..." /> </div> <div id="results-container"></div> <p id="movie-unavailable-txt"></p> </main> <script src="./live-search.js"></script> <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js" ></script> <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js" ></script> </body></html>既然我们已经完成了项目的HTML构造的实现，那么让我们给页面添加一些样式。
为页面添加样式在这个部分，我们将为页面的各个部分添加基本的样式。以是让我们开始吧。首先，让我们为页面的整体部分添加一些常规样式：
html{ scroll-behavior: smooth; background-color: #111; color: whitesmoke;}{ margin: 0; padding: 0; box-sizing: border-box;}现在让我们为头部部分及其内容添加一些样式：
header{ display: flex; justify-content: center; padding: 25px; letter-spacing: 2px; position: sticky; top: 0%; z-index: 2; border-bottom: 2px solid ; background-color: black; text-shadow: 3px 3px 5px #fd1d6b; box-shadow: 10px 10px 20px -10px #fd1d6b; }header > ion-icon{ color:#fd1d6b; font-size: 60px; position: absolute; left: 5%;}接下来，我们开始对搜索容器及其内容进行样式设置：
#search-container{ display: flex; justify-content: center; padding: 20px; margin-bottom: 20px; position: sticky; top: 100px;}#search-bar{ border: none; width: 60%; padding: 15px; padding-left: 40px; border-radius: 15px; font-size: 15px;}#search-container>ion-icon{ color: gray; position: relative; left: 30px; top: 13px; z-index: 3; font-size: 19px;}之后，我们连续设计将来从电影数据库中获取的所有电影的 results-container 的样式
#results-container{ border-right: 5px solid #fd1d6b; border-left: 5px solid #fd1d6b; border-radius: 25px; display: flex; justify-content: center; flex-wrap: wrap; width: 90vw;}接下来，我们在 movie-unavailable-txt 中添加样式，同时将 display 设置为 none ，由于我们暂时不肯望它可见
#movie-unavailable-txt{ text-align: center; letter-spacing: 2px; display: none; margin-top: 15%; text-shadow: 3px 3px 5px #fd1d6b;}接下来，我们将为一些尚未声明但将通过JavaScript创建的元素添加一些样式。这是电影卡片，将显示电影的详细信息，包括电影图片和标题：
.movie-cards{ padding: 25px; max-width: 250px; border-radius: 15px; display: grid; place-items: center; box-shadow: 1px 1px 20px -1px #fd1d6b ; margin: 50px;}.title{ margin: 20px auto; text-align: center; font-size: 1.2rem; text-shadow: 3px 3px 5px #fd1d6b; }.date{ margin-top: 15px; font-size: 0.8rem; text-shadow: 3px 3px 5px #fd1d6b; }.movie-image{ width: 90%; max-width: 400px; object-fit: contain; border-radius: 5px;}既然我们已经完成了页面的样式，那么让我们连续进行最有趣和最主要的部分，即Javascript的实现。
向电影数据库API发送异步搜索要求在本节中，我们将调用我们选择的电影数据库API来添补我们的页面，展示各种电影。在这种情形下，我将利用RapidAPI Hub中的IMDb Top 100 Movies免费电影API。在API页面中，我们选择要利用的特天命据，然后复制页面右侧供应的javascript(fetch)代码，如下所示：
https://rapidapi.com/rapihub-rapihub-default/api/imdb-top-100-movies
首先，在您利用API之前，请先订阅它（无需信用卡），以便为您天生一个API密钥。您可以在API的定价页面上进行订阅。
连续，我们进入我们的空的JavaScript文件，并将我们复制的代码粘贴进去：
const url = "https://imdb-top-100-movies.p.rapidapi.com/";const options = { method: "GET", headers: { "X-RapidAPI-Key": "YOUR GENERATED API KEY", "X-RapidAPI-Host": "imdb-top-100-movies.p.rapidapi.com", },};try { const response = await fetch(url, options); const result = await response.text(); console.log(result);} catch (error) { console.error(error);}既然我们已经将电影数据库的API引入到我们的项目中，我们可以利用它的数据了。接下来，我们将声明一些我们须要的变量，并将它们放在我们复制的代码中 try 块的上方。
const searchBar = document.getElementById("search-bar");const resultsContainer = document.getElementById("results-container");const movieUnavailableTxt = document.getElementById("movie-unavailable-txt");let movieList;let searchValue;let searchedMovies;我们正在靠近刚刚创建的这些变量的目的，坚持住。
接下来，我们对复制的代码中的 try 块进行一些变动，由于我们希望将其与我们的项目完备集成。以是首先，我们须要创建一个异步函数：
const fetchMovies = async () => { // try catch block goes in here.};在这个函数内部，我们将放置从我们复制的代码中的全体 try catch 块，以便我们可以进行异步API调用。
在 try 块内，我们将删除 console.log(result) 行，并将 result 变量变动为先前声明的 movieList 变量，并将同一行中的 response.text() 变动为 response.json() 。这样，我们从API调用中吸收到的数据将以 JSON 格式呈现，这是我们所需的。因此，该行现在该当是这样的
movieList = await response.json();现在我们已经成功从API中获取了电影并返回了我们的数据集，我们须要将这些数据添补到我们的页面中。为此，我们将调用 renderMovies() 函数，并将参数设置为从API调用中获取的数据。不用担心，我们很快就会创建这个函数：
renderMovies(movieList);现在让我们创建 renderMovies 函数，这个函数刚刚在 fetchMovies() 函数中调用过，这个函数将用于创建动态电影卡片模板，我们之前在CSS文件中设置了样式，模板中的每个元素的内容都将设置为从API获取的数据，这样我们就可以利用相同的模板渲染不同的电影。然后，我们将把电影卡片放在 resultsContainer 元素中。每次调用函数时，我们须要打消 resultsContainer ，并将 moviesUnavailableTxt 设置为 display="none" ，由于我们希望在渲染电影到页面时文本不可见，同时打消 moviesReturnedOnSearch 数组，然后将从搜索输入字段返回的新数据设置到个中。
const renderMovies = (movies) => { resultsContainer.innerHTML = ""; // Clear the existing movies movieUnavailableTxt.style.display = "none"; // Hide the "No movies found" message moviesReturnedOnSearch = []; // Clear the movies returned on search array movies.forEach((movie) => { resultsContainer.innerHTML += ` <div class="movie-cards"> <img src="${movie.image}" alt="movie image" class="movie-image" /> <h2 class="title">${movie.title}</h2> <p class="plot">${movie.description}</p> <p class="date">${movie.year}</p> </div> `; moviesReturnedOnSearch.push(movie); // Add the movies that are a result to the search input value });};捕捉用户输入并实时显示电影搜索结果现在我们已经将所有电影数据加载到我们的页面上，接下来是真正有趣的部分，我们要实现实时搜索功能，以是，不摧残浪费蹂躏韶光，让我们开始吧。
为了捕获用户输入，我们将利用 input 事宜监听器，并将其链接到 searchBar 元素。我们利用这个特定的事宜监听器，由于它可以捕获搜索框内的每一个活动，包括输入、打消和粘贴，这正是我们想要的。以是让我们连续创建它：
searchBar.addEventListener("input", (event) => { // live functionality code});好的，现在我们已经将事宜监听器链接到搜索栏，以便监听用户的任何输入。在第二个参数中，我们添加了事宜处理程序，这是每当搜索栏有输入时将被调用的函数。现在，在该函数内部，我们将编写处理实时搜索的代码。
在搜索功能中，我们须要做的第一件事是编辑从用户那里获取到的输入值，并将其转换为全小写，同时去除任何不必要的空格：
searchValue = event.target.value.trim().toLowerCase();在那之后，我们连续根据用户的搜索输入，通过检讨用户输入的电影标题是否包含在 movieList 数据中的任何电影标题中，并将电影标题设置为小写以与用户输入匹配，来在页面上按标题筛选电影
const filteredMovies = movieList.filter( (movie) => movie.title.toLowerCase().includes(searchValue) );接下来，我们将通过再次调用 renderMovies() 函数，并将参数设置为 filtered Movies 变量的值，来显示与用户在搜索栏中输入的字符匹配的电影标题的实时搜索结果。
renderMovies(filteredMovies);通过调用此函数，它仅将与搜索栏中键入的字符匹配的电影渲染到页面上，利用函数中供应的电影卡片模板，同时将每个匹配的电影添加到 moviesReturnedOnSearch 数组中，以便我们可以跟踪每个字符输入的匹配搜索值的电影数量。在处理空相应缺点时，这将非常有用，现在我们将进入这个部分。
处理空或缺点相应在任何运用程序中，有效处理空或缺点的相应至关主要。在这种情形下，这些情景可能发生在搜索查询没有结果或API要求存在问题时。
处理缺点或空相应时，向用户供应清晰的反馈是至关主要的。话虽如此，由于这是一个相对大略的运用程序，我们不必过多担心缺点，由于我们只须要处理由API引起的缺点。例如，API做事可能暂时不可用，或者运用程序可能刚刚超过了要求限定。为了处理这个缺点，我们只须要将 movieUnavailableTxt 元素的 display 设置为 block ，并将 innerHTML 设置为向用户显示缺点，并将其放置在 fetchMovies() 函数的 catch 块中。因此，现在 catch 块的代码如下所示：
catch (error) { movieUnavailableTxt.innerHTML = 'An error occurred while fetching movies. <br /> Please try again later.'; movieUnavailableTxt.style.display = "block"; console.error(error);}现在我们已经处理完缺点相应，接下来我们要处理空相应。如果用户搜索的电影与页面上的任何电影都不匹配，我们须要向用户提示所搜索的电影不可用。为了做到这一点，首先我们须要检讨之前声明的 moviesReturnedOnSearch 数组的内容，如果数组的长度小于或即是0，我们将设置 movieUnavailableTxt 元素的 display 为 block ，并将 innerHTML 设置为空相应，如下所示：
if (moviesReturnedOnSearch.length <= 0) { movieUnavailableTxt.innerHTML = "OOPS! <br/><br/> Movie not available"; movieUnavailableTxt.style.display = "block"; // Show the "No movies found" message if no movies match the search}我们将把这个 if 块放在 searchBar 事宜处理程序的闭合括号之前。
通过缓存提高搜索性能在利用API实现实时搜索功能时，提高性能的一种有效技能是缓存。缓存涉及存储先前获取的搜索结果，并在再次要求相同的搜索查询时重复利用它们。这可以显著减少API调用的次数，有助于防止超过API的要求限定，并改进搜索功能的相应速率以及网站的加载韶光。
要在我们的项目中实现缓存，首先，我们须要确定哪些项目须要被缓存，而在这种情形下，那将是 movieList 变量的值，它是我们从 fetch API要求中得到的 JSON 格式的数据。通过缓存这个项目，我们将能够在页面重新加载时利用API的数据，而无需进行额外的 fetch 要求。但是对付这个项目，我们将为我们的缓存数据设置一个过期韶光，为6小时，这意味着页面每6小时只会进行一次API要求，而不是在每次页面重新加载时都进行要求。这样做是为了保持页面的数据新鲜和最新，同时将API要求保持在最低限度。
回到我们的代码中，现在我们须要将数据存储在浏览器确当地存储中，但为了做到这一点，我们须要首先将其转换为一个 string ，并设置一个键名，用于在本地存储中标识数据。让我们将其设置为 movieData ，如下所示：
localStorage.setItem("moviedata", JSON.stringify(movieList));接下来我们须要将当前日期和韶光存储在本地存储中：
localStorage.setItem("cacheTimestamp", Date.now());这将当前日期和韶光以毫秒为单位存储，键名为 cacheTimeStamp 。
我们将把这两行代码放在 try 块的 fetchMovies() 函数中，就在 movieList 变量的下方。
接下来，在 fetchMovies() 函数之外，紧接着 renderMovies() 函数的下方，我们将把缓存数据的过期韶光设置为6小时（以毫秒为单位）
const expirationDuration = 21600000; // 6 hours in milliseconds之后，我们须要取回之前在本地存储中设置的 cacheTimestamp ：
const cacheTimestamp = localStorage.getItem("cacheTimestamp");现在，我们将检讨缓存数据是否已过期或不可用，这意味着它尚未被存储。如果是这种情形，我们将通过调用 fetch 函数向API发出新的要求。另一方面，如果缓存数据存在且尚未过期，我们将利用它来渲染页面上的电影，而不是再次发出新的 fetch 要求。我们通过检索缓存的电影数据并将其解析回 JSON 格式来利用，然后将参数设置为从缓存中获取的数据，调用 render 函数来实现这一点。
// Check if cache has expired or data is not availableif ( !cacheTimestamp || Date.now() - parseInt(cacheTimestamp) > expirationDuration) { // Cache expired or data not available, fetch movies again fetchMovies();} else { // Use cached movie data movieList = JSON.parse(localStorage.getItem("moviedata")); renderMovies(movieList);}在 if 语句中， !cacheTimestamp 检讨 cacheTimestamp 变量是否为假值，意味着它可以是 null 、 undefined 、0、 false 或空字符串。如果 cacheTimestamp 为假，表示没有存储现有缓存韶光戳。 Date.now() - parseInt(cacheTimestamp) 打算当前韶光戳与解析的 cacheTimestamp 的整数值之间的韶光差。大略来说，这便是说：“当前韶光的值减去我们之前存储在缓存中的韶光的值，是否大于我们设置的过期韶光？如果是，就从API中重新获取电影数据；如果不是，就利用缓存的数据。”
便是这样，这便是我们如何将数据缓存起来以便重复利用，而不是在每次用户输入或每次页面重新加载时发起要求。正如你所看到的，这将极大地优化运用程序的性能，由于它可以防止由于网络慢而导致的电影渲染缓慢。
我们已经完成了我们的小电影运用程序中展示实时搜索功能的所有特性的实现。以下是该运用程序的整体JavaScript代码：
const url = "https://imdb-top-100-movies.p.rapidapi.com/";const options = { method: "GET", headers: { "X-RapidAPI-Key": "Your Generated API Key", "X-RapidAPI-Host": "imdb-top-100-movies.p.rapidapi.com", },};const searchBar = document.getElementById("search-bar");const resultsContainer = document.getElementById("results-container");const movieUnavailableTxt = document.getElementById("movie-unavailable-txt");let movieList;let searchValue;let moviesReturnedOnSearch;// Function to fetch movies from the APIconst fetchMovies = async () => { try { const response = await fetch(url, options); movieList = await response.json(); // Storing the Movie Data in browser storage localStorage.setItem("moviedata", JSON.stringify(movieList)); localStorage.setItem("cacheTimestamp", Date.now()); // Update cache timestamp // Render the movies on the page renderMovies(movieList); } catch (error) { movieUnavailableTxt.innerHTML = "An error occurred while fetching movies. <br /> Please try again later."; movieUnavailableTxt.style.display = "block"; console.error(error); }};// Function to render movies on the pageconst renderMovies = (movies) => { resultsContainer.innerHTML = ""; // Clear the existing movies movieUnavailableTxt.style.display = "none"; // Hide the "No movies found" message moviesReturnedOnSearch = []; // Clear the movies returned on search array movies.forEach((movie) => { resultsContainer.innerHTML += ` <div class="movie-cards"> <img src="${movie.image}" alt="movie image" class="movie-image" /> <h2 class="title">${movie.title}</h2> <p class="plot">${movie.description}</p> <p class="date">${movie.year}</p> </div> `; moviesReturnedOnSearch.push(movie); // Add the movies that are a result to the search input value });};const cacheTimestamp = localStorage.getItem("cacheTimestamp");const expirationDuration = 21600000; // 6 hours in milliseconds// Check if cache has expired or data is not availableif ( !cacheTimestamp || Date.now() - parseInt(cacheTimestamp) > expirationDuration) { // Cache expired or data not available, fetch movies again fetchMovies();} else { // Use cached movie data movieList = JSON.parse(localStorage.getItem("moviedata")); renderMovies(movieList);}// Event listener and handler for search bar inputsearchBar.addEventListener("input", (event) => { searchValue = event.target.value.trim().toLowerCase(); // Filter movies based on search input const filteredMovies = movieList.filter((movie) => movie.title.toLowerCase().includes(searchValue), ); // Render the filtered movies on the page renderMovies(filteredMovies); if (moviesReturnedOnSearch.length <= 0) { movieUnavailableTxt.style.display = "block"; // Show the "No movies found" message if no movies match the search }});结论在本指南中，我们磋商了利用API在JavaScript中实现实时搜索功能的方法。按照所述步骤，您可以创建一个动态搜索体验，当用户在搜索栏中输入时，可以供应实时结果。
通过在您的网站上实现实时搜索功能，您可以增强用户参与度，提高您的网站或运用程序的可用性。用户将欣赏能够快速方便地找到干系信息，而无需重新加载页面。
通过这个指南所得到的知识，您已经具备了在JavaScript中有效实现实时搜索功能的能力。拥抱动态搜索的力量，创造一个无缝的用户体验，给人留下深刻的印象。
由于文章内容篇幅有限，本日的内容就分享到这里，文章结尾，我想提醒您，文章的创作不易，如果您喜好我的分享，请别忘了点赞和转发，让更多有须要的人看到。同时，如果您想获取更多前端技能的知识，欢迎关注我，您的支持将是我分享最大的动力。我会持续输出更多内容，敬请期待。
上一篇
