МИНОБРНАУКИ РОССИИ
САНКТ-ПЕТЕРБУРГСКИЙ ГОСУДАРСТВЕННЫЙ
ЭЛЕКТРОТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ
«ЛЭТИ» ИМ. В.И. УЛЬЯНОВА (ЛЕНИНА)
Кафедра ВТ
ОТЧЕТ
по лабораторной работе №6
по дисциплине «Распределенные системы»
Тема: AJAX
Студенты гр. |
|
|
|
|
|
|
|
|
|
|
|
Преподаватель |
|
Бекенева Я.А.. |
Санкт-Петербург
2023
Задание
Написать веб-приложение, поддерживающее автодополнение c использованием AJAX.
Ход работы
При нажатии на поле и ввод выводится список с предложениями ввести город по совпадающему началу.
Структура проекта представлена на рис. 1
Рисунок 1. Структура проекта
Рисунок 2. Результат выполнения программы
Рисунок 3. Результат выполнения программы
index.html
<!DOCTYPE html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <meta charset="UTF-8"> </head> <body> <label>Введите город: </label> <label> <input type="text" list="cities" onkeyup="showData(this.value);"> </label> <datalist id="cities"> <!-- Выпадающий список --> </datalist> <script> function showData(value) { $.ajax({ url: "cities/" + value, success: [function (data) { $('option').detach(); //deleteLater(); data.forEach(function (city) { $('#cities').append($('<option>', { 'text': city })); }); } ] }); } </script> </body> </html>
Controller.java
package lab6; import org.springframework.web.bind.annotation.PathVariable; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import java.io.File; import java.util.LinkedList; import java.util.List; import java.util.Scanner; import java.util.stream.Collectors; @RestController @RequestMapping("cities") public class Controller { private static final List<String> cities = new LinkedList<>(); static { try{ Scanner scanner = new Scanner(new File("src/main/resources/cities.txt")); System.out.println("Файл загружен!"); while (scanner.hasNext()){ cities.add(scanner.nextLine()); } } catch (Exception e){ System.out.println("Не получилось загрузить файл .txt:("); } } @RequestMapping("/{city}") public List<String> autocomplete(@PathVariable String city) { return cities.stream().filter(e -> e.startsWith(city)) .collect(Collectors.toList()); } }