在html Javascript中搜索
在HTML和JavaScript中，搜索功能可以通过使用HTML中的<input>元素和JavaScript中的事件监听器来实现。以下是一个简单的示例，展示了如何在HTML和JavaScript中实现搜索功能：
- HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>搜索示例</title>
</head>
<body>
<input type="text" id="searchInput" placeholder="搜索...">
<ul id="searchResults">
<li>结果1</li>
<li>结果2</li>
<li>结果3</li>
</ul>
<script src="search.js"></script>
</body>
</html>- JavaScript代码（search.js）：
const searchInput = document.getElementById('searchInput');
const searchResults = document.getElementById('searchResults');
searchInput.addEventListener('input', function() {
const searchTerm = searchInput.value.toLowerCase();
const resultItems = searchResults.getElementsByTagName('li');
for (let i = 0; i< resultItems.length; i++) {
const itemText = resultItems[i].textContent.toLowerCase();
if (itemText.includes(searchTerm)) {
resultItems[i].style.display = 'block';
} else {
resultItems[i].style.display = 'none';
}
}
});在这个示例中，我们使用了一个<input>元素来接收用户输入的搜索关键词，并使用addEventListener方法监听input事件。当用户在输入框中输入文字时，事件监听器会触发，并执行相应的JavaScript代码。
在JavaScript代码中，我们首先获取到输入框和搜索结果列表的DOM元素。然后，我们遍历搜索结果列表中的每个项目，并检查它们的文本内容是否包含用户输入的搜索关键词。如果项目的文本内容包含搜索关键词，则将其显示出来；否则，将其隐藏。
这个示例仅仅是一个简单的搜索功能实现，实际应用中可能需要更复杂的逻辑和更高级的搜索算法。
相关·内容
2回答
使用JavaScript - textContent错误筛选HTML表
javascript、php、html
期望的结果：将.csv文件中的数据输入到PHP中。将.csv文件中的数据存储到一个数组中。使用PHP将数组存储到HTML表中。使用搜索引擎使用JavaScript过滤行。
我在JavaScript中得到以下错误: Uncaught :无法读取属性'textContent‘的null
<script>
const searchInput = document.getElementById("search");
const rows = document.querySelectorAll("tbody tr");
//console.log(
浏览 5提问于2021-07-23得票数 3
回答已采纳
1回答
香草Javascript:我如何创建一个具有隐藏结果的工作搜索栏？
javascript、dom-events、keycode、search-box
我对Javascript非常陌生，并且已经使用了将近一个月。我正试图创建一个网站复活节彩蛋，可以通过键入一个隐藏的词到搜索栏。我的问题主要是让变量值读取数组中的字符串。没有出现任何错误消息。
这是我的代码：
let searchResults = ['dog', 'cat', 'bird'];
let searchInput = document.querySelector('.search-box .input-box #searchbar');
function searchBar() {
searchInput.add
浏览 2提问于2021-12-29得票数 0
回答已采纳
1回答
如何在JavaScript中实现自动填充提示
javascript、html、api
我有一个javascript输入，我希望在输入框下面显示搜索建议，基于用户正在搜索的内容。我有一个使用fetch API的国家的大型数据库，我想有它，以便当用户在输入字段中键入他/她的国家时，搜索建议直接显示在它的下方。
到目前为止，我的代码如下：
let searchInput = document.getElementById("input")
searchInput.addEventListener("keyup", function() {
fetch("https://api.covid19api.com/summary")
浏览 2提问于2020-06-08得票数 0
2回答
如何在清除输入字段时触发JavaScript事件？
javascript、html
我正在尝试制作一个即时搜索框。当用户开始在搜索框中输入时，它会触发一个javascript事件来隐藏博客帖子(#home)，然后将显示搜索结果(脚本的这一部分不包括在下面)。然而，在用户清除搜索框后，他们只看到一个空白页面，因为display of #home仍然设置为none。
如何使JavaScript检测用户，清除#search-input上的输入字段，并再次使#home显示true？
document.getElementById('search-input').oninput = function() {
document.getElementById(
浏览 4提问于2017-12-03得票数 1
回答已采纳
1回答
如何让来自父页面javascript实现iframe
javascript、html、iframe、parent-child
我试图使用w3schools搜索过滤器制作一个搜索系统，我想使用iframes来显示搜索结果。如何使父页面上的搜索栏在iframe上工作。 以下是我的代码 function searchFunction() {
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById("searchinput");
filter = input.value.toUpperCase();
ul
浏览 19提问于2020-10-04得票数 0
2回答
如何根据输入字段(如搜索栏)中的值更改HTML中div元素的可见性？
javascript、html、css
因此，我有一个很小的文本字段，我希望用户在其中输入一个位置(或任何字符串)-基于键入的条目-我希望根据键入的文本更改div的可见性。下面是我正在使用的“表单”的一些代码：
<div class="form-group">
<label>Location:</label>
<input type="text" class="form-control" id="search_input" placeholder="Type address..." />
<--!
浏览 1提问于2020-08-17得票数 0
5回答
当搜索输入字段被清除时，如何在搜索过滤器中隐藏列表项？
javascript、jquery、html
我有一个HTML列表项，如下所示： <ul id="fruits">
<li><a href="#">Mango</a></li>
<li><a href="#">Apple</a></li>
<li><a href="#">Grape</a></li>
<li><a href="#">Cherry</a></
浏览 33提问于2017-07-12得票数 2
回答已采纳
2回答
Vue 3组合API在多个组件中的重用
vue.js、components、vuejs3、vue-composition-api
我有这些文件 App.vue、Header.vue、search.js和Search.vue App.vue是正常的，只是添加了不同的视图 Header.vue有一个输入框 <input type="text" v-model="searchPin" @keyup="searchResults" />
<div>{{searchPin}}</div> 和脚本： import useSearch from "@/compositions/search";
export default {
浏览 38提问于2020-09-01得票数 2
回答已采纳
2回答
div中的可单击选项
javascript、html、css
我想让选项元素标记在div中可点击。更像是一个选择标签。您可能会想，为什么我不能使用select元素。在我的例子中，我需要一个带有菜单的搜索栏。因此我使用了一个输入。我试过的方法如下。似乎value属性是不可分配的，也不是可点击的。有人知道这件事吗？
html：
<input id="searchInput" list="searchList" type="text" placeholder="Search.." onkeyup="filterFunction()">
<div id="s
浏览 8提问于2022-04-22得票数 0
回答已采纳
1回答
在Javascript“提前键入”代码中，innerHTML不能与多个eventListener一起使用
javascript、html、innerhtml、addeventlistener
我正在学习Wes Box Javascript30课程，并在"Type Ahead“代码中添加自己的内容。原始代码接受单个数据源，并使用eventListener更新搜索建议，方法是返回模板文字中的列表元素，并在用户键入输入时使用innerHTML更新结果。我已经修改了代码以搜索另一组数据，但现在我无法获得“提前键入”功能来正确更新建议。 由于我专注于构建纯Javascript知识，因此我没有使用任何库来编写本文。我尝试了几种不同的技术，大多数都在这里找到，但我无法正常工作。 这一条(支持率最高的答案)建议使用insertAdjacentHTML()。在我的代码中的问题是，与较少字母
浏览 13提问于2019-01-31得票数 0
回答已采纳
1回答
如何向搜索关键字添加特定链接
javascript、html
这是我正在做的搜索代码，但是我想给数组'people‘的成员提供特定的链接，这样'rock’就会有自己的链接到另一个页面，'brock'，会有它自己的链接等等，搜索工作非常完美，但是我希望结果能够链接到其他页面。
下面是代码(没有html)
const people = [
{name: 'david'},
{name: 'patel'},
{name: 'kevin'},
{name: 'coco'},
{name: &
浏览 2提问于2019-09-18得票数 1
1回答
如何将此addEventListener更改为单击按钮
javascript
因此，我有这个搜索javascript，它与您输入的结果相匹配，并自动执行。这些行是做什么的(下面)。是否有任何方法将其更改为仅在按下按钮时才能工作？
const searchInput = document.querySelector('.search');
const suggestions = document.querySelector('.suggestions');
searchInput.addEventListener('change', displayMatches);
searchInput.addEventListener
浏览 4提问于2019-12-24得票数 0
回答已采纳
1回答
php即时搜索崩溃
php、jquery、mysql、search
我已经创建了一个使用php和jquery的MYSQL数据库的即时搜索。在我删除一些关键字搜索词并重新开始搜索之前，搜索是正常运行的。一旦用户删除了搜索项，搜索结果将不再按预期返回。一旦发生这种情况，如果我刷新页面，我会从浏览器收到一条“没有收到数据”的消息，并且站点在一分钟左右的时间内不会再次联机。为了理解我的意思，你可以访问www.partsearch.club ..可以使用的一些关键字是"decora wet tek tk“。如果你继续添加和删除搜索词，你会明白我的意思。以下是我的代码
index.php
<!doctype html>
<html>
<
浏览 2提问于2016-02-06得票数 0
1回答
如何显示结果中突出显示的searchInput？
javascript
我试图在结果中以突出显示的背景(公司名称和公司符号)显示搜索的部分。数据正在传递，但结果似乎没有突出显示正在输入的内容。我遗漏了什么？
下面的例子-输入是'aa‘，但是结果突出了c，或m，或l。
//JAVASCRIPT//
class SearchResults {
constructor(element) {
this.element = element;
this.search = document.getElementById("searchInput");
}
renderResults(c
浏览 2提问于2021-11-08得票数 0
回答已采纳
1回答
如何修正“无法读取属性'addEventListener‘of null”
javascript、html
我正在学习如何从一个视频教程自动完成搜索栏。我做了所有视频做的事，但都没有用。我认为问题在于add.EventListener。当我在Chrome中运行代码时，它在控制台中显示：
Uncaught :无法读取null的属性“addEventListener”
代码：
searchInput.addEventListener('keyup', function() {
const input = searchInput.value;
suggestionsPanel.innerHTML = '';
const suggestions = movies.filt
浏览 5提问于2019-10-09得票数 0
1回答
从django API获取搜索结果时响应App崩溃
reactjs、search、django-rest-framework
当从API获取searchResults时，我的React应用程序崩溃了，我已经检查了API明智的搜索查询，但是当我试图通过React发送输入并显示结果时，它崩溃了，甚至冻结了我的PC。我不明白这里发生了什么事。我在没有搜索查询的情况下从React中从API中获取结果，而且它可以工作。因此，当通过Curl和React应用程序使用API时，可以获取和显示所有数据，但无法显示特定的数据。下面是我的代码：
function Search() {
const [data, setData] = React.useState([]);
const [searchTerm, setSearchTe
浏览 2提问于2021-02-04得票数 0
回答已采纳
1回答
油门功能中断了我的输入实时搜索
javascript、typescript、throttling
当用户在搜索字段中输入一些单词时，必须对块进行重绘。当我在代码中实现油门功能时，实时搜索停止工作，现在卡片重绘就不会发生了。
searchInput.addEventListener('input', (event: Event) => {
searchTerm = (event.target as HTMLTextAreaElement).value.toLowerCase();
throttle(() => {
showList();
}, 100);
});
function throttle(func: Function, ms
浏览 4提问于2022-01-05得票数 2
回答已采纳
2回答
我有一个关于纯JavaScript的代码。它在jQuery上是怎样的？如何让它变得更短？
我试着自己做这件事，但在使用getElementsByTagName时遇到了一些问题。
function searchFunction() {
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById("searchinput");
filter = input.value.toUpperCase();
ul = document.getElementById("it
浏览 0提问于2019-08-07得票数 0
4回答
addEventListener在反应中为空
javascript、reactjs
我正在使用React创建一个搜索功能。我以前用过这种方法，但没有反应，而且起了作用。现在，它在控制台中出现了一个错误："Uncaught :无法读取属性'addEventListener‘of null“。这和它的反应有关吗？我该怎么解决这个问题？
<body>
<div id="searching"></div>
<script type="text/babel">
class SearchBox extends React.Component { render(){ return(
浏览 5提问于2017-03-01得票数 4
回答已采纳
1回答
基于Axios API提取的React搜索
javascript、reactjs、react-hooks
我不知道我说得对不对，但现在.工作在建立一个Pokedex学习一点反应，与钩子，我想能够立即搜索通过口袋妖怪。现在，我已经将两个PokeAPI数据集(口袋妖怪和口袋妖怪-物种)合并在一起，以获取所有内容。以下是我所拥有的：
更新：
const [pokemon, setPokemon] = useState();
const [searchTerm, setSearchTerm] = useState('');
const [searchResults, setSearchResults] = useState([]);
const searchOnChange = e =&
浏览 3提问于2020-08-18得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
