.search-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin: 20px 0;
}
label {
font-weight: bold;
margin-right: 10px;
color: #48c3ff;
}
select, input[type="text"], button {
font-size: 1rem;
padding: 10px;
border: none;
border-radius: 4px;
color: #333;
}
select, input[type="text"] {
width: 250px;
margin-right: 10px;
background-color: #f2f2f2;
}
button {
background-color: #48c3ff;
color: #fff;
cursor: pointer;
transition: all 300ms ease;
}
button:hover, button:focus {
background-color: #256fb0;
}
#search-results {
margin-top: 10px;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
padding: 5px 10px;
}
// Функция для выполнения запросов к Google Таблицам.
// Измените URL, заменив SPREADSHEET_ID на ID вашей таблицы и RANGE_NAME на диапазон данных для вашей таблицы.
function getData(searchValue, searchType) {
var url = "https://docs.google.com/spreadsheets/d/1t6tEGSB0mOBxIn0kEJ68-G6z10pwhmmh8pfPpDNgjgI/edit?usp=sharing";
url = url.replace("1t6tEGSB0mOBxIn0kEJ68-G6z10pwhmmh8pfPpDNgjgI", "YOUR_SPREADSHEET_ID")
.replace("Результаты тест кода!A1:A50", "YOUR_RANGE_NAME")
.replace("API_KEY", "YOUR_API_KEY");
return axios.get(url)
.then(function (response) {
// Полученный массив data содержит данные из таблицы Google в массиве строк.
var data = response.data.values;
var result = [];
// Проходимся по массиву данных и ищем значения, соответствующие запросу.
for (var i = 0; i < data.length; i++) {
var row = data[i];
var columnValue = row[0];
var searchStr = row[searchType].toLowerCase();
if (searchStr.indexOf(searchValue.toLowerCase()) > -1) {
result.push(columnValue);
}
}
return result;
})
.catch(function (error) {
console.log(error);
});
}
// Функция, которая обрабатывает событие отправки формы поиска.
function searchSubmit() {
// Получаем значения полей из формы поиска.
var searchInput = document.getElementById("search-input").value;
var searchType = document.getElementById("search-type").value;
// Вызываем функцию getData для поиска значений соответствующих запросу.
getData(searchInput, searchType).then(function (result) {
// Выводим результаты в div с id "search-results".
var searchResults = document.getElementById("search-results");
searchResults.innerHTML = "";
var ul = document.createElement("ul");
for (var i = 0; i < result.length; i++) {
var li = document.createElement("li");
li.textContent = result[i];
ul.appendChild(li);
}
if (result.length === 0) {
var li = document.createElement("li");
li.textContent = "Ничего не найдено";
ul.appendChild(li);
}
searchResults.appendChild(ul);
});
// Останавливаем отправку формы.
return false;
}