Hướng dẫn how to make a html search engine - cách tạo công cụ tìm kiếm 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.
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.
Search Names
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.
Phông chữ-Family được lấy từ các phông chữ của Google, 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ữ.
hoặc thêm liên kết này trong tệp CSS của bạn.
@import url[//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