使用HTML CSS和JavaScript创建一个维基百科搜索

在本文中，我们将创建一个应用程序，用于搜索维基百科。使用HTML、CSS和JavaScript，用户将能够在维基百科上搜索文章并在用户界面中查看结果。当用户将搜索文本输入到文本框中时，将向用户显示相同的搜索结果，并且用户可以点击结果，将会被重定向到相应的维基百科页面。

先决条件

最终输出

方法

我们将设计一个用户界面，其中包含一个用于搜索查询的输入字段和一个用于显示搜索结果的区域。一旦用户输入查询并点击“搜索”按钮，我们的JavaScript代码将发送请求到Wikipedia API来获取文章。然后将获取的结果显示在网页上。

首先创建一个HTML文件，其中包括一个输入字段和一个用于显示结果和所需结构的容器。
使用CSS对界面进行样式设置，使其具有视觉吸引力。
实现JavaScript代码以侦听“Enter”键被按下的事件。
当按下键盘按钮事件发生时，构建一个用于访问Wikipedia API的URL，其中包含指定的搜索查询。
利用AJAX从API中获取 JSON 数据。
删除任何搜索结果。动态生成HTML以显示新的搜索结果。

项目结构

使用HTML CSS和JavaScript创建一个维基百科搜索

示例： 这个示例描述了使用HTML、CSS和JavaScript实现Wikipedia搜索的基本实现。

HTML

<!--Index.html-->
  
<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" 
          type="text/css"
          href="styles.css" /> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 
    <script src="app.js" 
            type="text/javascript"> 
    </script> 
</head> 
  
<body> 
    <h1 id="top"> 
        GeeksforGeeks 
    </h1> 
    <h1> 
        Wikipedia Viewer 
    </h1> 
    <div class="container-new"> 
        <div id="searchBox"> 
            <input type="text" 
                   id="search" 
                   autocomplete="off" 
                   placeholder="Search here" /> 
        </div> 
    </div> 
</body> 
  
</html>

CSS

/* Style.css */
  
body { 
    text-align: center; 
} 
  
#top { 
    color: green; 
} 
  
h1 { 
    margin-top: 30px; 
} 
  
p { 
    background-color: rgb(153, 
            225, 
            155); 
} 
  
#randomPage { 
    color: white; 
} 
  
input[type="text"] { 
    border-radius: 15px; 
    text-align: center; 
    height: 50px; 
    width: 600px; 
    -webkit-transition: width 0.4s ease-in-out; 
    transition: width 0.4s ease-in-out; 
} 
  
input[type="text"]:focus { 
    width: 100%; 
} 
  
.searchTitle { 
    font-weight: bold; 
    margin-bottom: 3px; 
} 
  
.searchResult { 
    background-color: rgb(153, 
            225, 
            155); 
    color: rgb(18, 17, 17); 
    height: 60px; 
    padding: 10px; 
    margin: 2px; 
} 
  
.searchResult:hover { 
    cursor: pointer; 
    background-color: white; 
    color: black; 
}

Javascript

// Script.js 
  
(document).ready(function () { 
    (document).keypress(function (e) { 
        if (e.which == 13) { 
            let webLink = 
"...api.php?action=query&list=search&srsearch=" + 
                document.getElementById( 
                    "search"
                ).value + 
                "&utf8=&format=json"; 
            .ajax({ 
                url: webLink, 
                dataType: "jsonp", 
                success: function ( 
                    data 
                ) { 
                    ("div").remove( 
                        ".searchResult"
                    ); 
                    for ( 
                        i = 0; 
                        i < 
                        data.query 
                            .search 
                            .length; 
                        i++ 
                    ) { 
                        let titleForResult = 
                            data.query 
                                .search[ 
                                i 
                            ].title; 
                        let snippetForResult = 
                            data.query 
                                .search[ 
                                i 
                            ].snippet; 
                        $( 
                            "#searchBox"
                        ).append( 
                            '<a href="https://example.com/' + 
                            titleForResult + 
                            `" target="_blank" rel="noopener"> 
                                <div class="searchResult"> 
                                <span class="searchTitle">` + 
                            titleForResult + 
                            "</span><span><br />" + 
                            snippetForResult + 
                            "</span></div></a>"
                        ); 
                    } 
                }, 
            }); 
        } 
    }); 
});