Hướng dẫn how to create a search engine like google in html - cách tạo một công cụ tìm kiếm như google trong html

Phục vụ người dùng web của bạn với dữ liệu mà họ yêu cầu có thể hơi khó khăn, đặc biệt là khi cơ sở dữ liệu của bạn bắt đầu trở nên rất lớn. Trong hướng dẫn này, tôi sẽ xây dựng một công cụ tìm kiếm đơn giản lấy dữ liệu từ cơ sở dữ liệu và hiển thị nó trên màn hình dựa trên đầu vào của người dùng. Nhấn vào đây để kiểm tra nóhere to check it out

Điều kiện tiên quyết

Kiến thức cơ bản về HTML, & NBSP;html, css and JavaScript is needed to fully grasp the concept in this tutorial.

Cơ sở dữ liệu

Để đơn giản, chúng tôi sẽ không thực sự kết nối với cơ sở dữ liệu & nbsp; hoặc API. Chúng tôi sẽ sử dụng một loạt các tên thu được từ GitHub. Thực hiện theo liên kết này để có được mảng tên hoặc bạn có thể chèn & nbsp; JavaScript & nbsp; thư viện bên dưới ngay trước thẻ cơ thể đóng của tài liệu của bạn và & nbsp; JavaScript & nbsp; mã.database or an API. We would be using an array of names obtained from GitHub. follow this link to obtain the array of names or you can insert JavaScript library below just before the closing body tag of your document and your JavaScript code.

<script src="https://naishare.com/external_js/database.js"></script>

HTML

& Nbsp; html & nbsp; của công cụ tìm kiếm thực sự là phần dễ nhất. & Nbsp; & nbsp; html & nbsp; đã được cấu trúc để làm cho các thành phần tìm kiếm đáp ứng.html of the search engine is actually the easiest part.  the html has been structured to make the search components responsive.

<div class="container-out"><div class="container-in"><div class="search-container"><div class="search-engine"><p class="search-title">Search Names</p><inputtype="input"id="search-input"autocomplete="off"placeholder="Hit Enter to Search"/></div><div id="search-results"></div><div id="search-data"></div></div></div></div>

CSS

Hãy nhớ làm cho trang web của bạn phản hồi bằng cách thêm thẻ meta Viewport ở thẻ đầu của tài liệu HTML của bạn.

<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>

Font-Family được lấy từ các phông chữ của Google, điều đó có nghĩa là bạn phải thêm liên kết CSS trong thẻ đầu của tài liệu của bạn trước khi gọi phông chữ.

<link
href="https://fonts.googleapis.com/css?family=Fira+Sans&display=swap"
rel="stylesheet"
/>

hoặc thêm liên kết này trong tệp CSS của bạn.

@import url(https://fonts.googleapis.com/css?family=Fira+Sans);

Tạo kiểu cho công cụ tìm kiếm

.container-out {
font-family: "Fira Sans", sans-serif;
padding: 15px 0;
}
.container-in {
width: 95%;
margin: 0 auto;
}
.search-container {
position: relative;
max-width: 300px;
margin: 0 auto;
text-align: center;
padding: 15px;
}
.search-title {
margin-top: 0;
margin-bottom: 5px;
color: #1ca0b8;
}
#search-input {
width: 90%;
padding: 13px;
border-radius: 4px;
border: 2px solid #1ca0b8;
font-size: 15px;
}
#search-input:focus {
outline: none;
}
#search-results {
position: absolute;
z-index: 10;
margin: 1px auto;
background: #1ca0b8;
width: 90%;
text-align: left;
border-radius: 4px;
border: 2px solid #1ca0b8;
display: none;
}
.search-item {
color: white;
cursor: pointer;
}
.search-item p {
margin: 0;
padding: 10px;
}
.search-item:hover {
background: #2cc7e2;
}
#search-data {
margin-top: 10px;
color: #1ca0b8;
}
#search-data p {
margin: 0;
padding: 6px;
font-size: 16px;
}

JavaScript

Thuật toán của tìm kiếm đã được thiết kế để cung cấp cho bạn các đề xuất khi bạn nhập và số lượng đề xuất tối đa đã được giới hạn ở 10. Nếu bạn nhấp vào bất kỳ đề xuất nào, tên được in ra và nếu bạn nhấn enter, tất cả các tên liên quan đến tìm kiếm xuất hiện.

//shortens document.getEgetElementById
function element(id) {
return document.getElementById(id);
}
let allSearchData = ""; //decleared to collect all search names
//gets each inputs data starting from second input
function getResults() {
//gets value of input
let search = element("search-input").value;
allSearchData = ""; //clears data for each word typed
hideSearchResults();
clearSearchResults();
clearSearchData(); //
//starts searching from the second input
if (search.length > 1) {
let counter = 0; // counts to 10
for (let x of names) {
if (counter < 10) {
//checks for similarities
if (x.toLowerCase().includes(search.toLowerCase())) {
//populates the suggestion div
element("search-results").innerHTML +=
"<div class='search-item' onclick='displayData(\"" +
x +
"\")'><p>" +
x +
"</p></div>";
counter++;
}
}
if (x.toLowerCase().includes(search.toLowerCase()))
//saves all the realated names
allSearchData += "<p>" + x + "</p>";
}
displaySearchResults();
}
}
//displays the suggestion div
function displaySearchResults() {
element("search-results").style.display = "block";
}
//clears the suggestion div
function clearSearchResults() {
element("search-results").innerHTML = "";
}
//hides the suggestion div
function hideSearchResults() {
element("search-results").style.display = "none";
}
//displays names when you click a suggestions
function displayData(name) {
element("search-data").innerHTML = "<p>" + name + "</p>";
hideSearchResults();
}
//displays all related names to your search when you hit enter
function displayAllData(names) {
element("search-data").innerHTML = names;
hideSearchResults();
}
//clears names displayed from search result
function clearSearchData() {
element("search-data").innerHTML = "";
}
//gets results after each input
element("search-input").oninput = function() {
getResults();
};
element("search-input").addEventListener("keyup", function(event) {
// Number 13 is the "Enter" key on the keyboard
if (event.keyCode === 13) {
// Cancel the default action, if needed
event.preventDefault();
// Trigger the button element with a click
displayAllData(allSearchData);
}
});

phần kết luận

Xây dựng công cụ tìm kiếm không khó nếu bạn đang xử lý một cơ sở dữ liệu nhỏ nhưng nếu bạn đang xử lý một cơ sở dữ liệu khổng lồ như Google thì bạn sẽ thấy mình sử dụng các thuật toán rất phức tạp để phục vụ người dùng của bạn tốt hơn.

Bạn có thể tạo công cụ tìm kiếm với HTML không?

Tôi có thể sử dụng HTML của riêng mình trên các trang web của Google không?

Công cụ tìm kiếm trong HTML là gì?