Рубрики
Без рубрики

Пример автозаполнения Spring MVC + jQuery

– Пример автозаполнения Spring MVC + jQuery

В этом уроке мы покажем вам, как интегрировать плагин автозаполнения jQuery с Spring MVC.

Используемые инструменты и библиотеки:

  1. Весенний MVC 3.2
  2. Плагин автозаполнения jQuery – github
  3. Мавен 3
  4. Среда РАЗРАБОТКИ Eclipse

Просмотрите потоки учебника:

  1. HTML-страница с текстовым полем.
  2. Если пользователь примеряет текстовое поле, он отправит Ajax-запрос (через плагин автозаполнения) на контроллер Spring.
  3. Spring обрабатывает вводимые пользователем данные и возвращает результат поиска (в формате JSON).
  4. “Плагин автозаполнения” обрабатывает возвращенный результат и отображает окно с предложением автозаполнения. См. Рисунок выше.

1. Каталог проектов

Просмотрите окончательную структуру каталогов проекта, стандартный проект Maven.

2. Зависимости проекта

Объявляет Spring, JSTL и Jackson (результат JSON).

       
		3.2.2.RELEASE
		1.2
		1.9.10
	

	
		
		
			jstl
			jstl
			${jstl.version}
		

		
		
			org.springframework
			spring-core
			${spring.version}
		

		
		
			cglib
			cglib
			2.2.2
		

		
			org.springframework
			spring-web
			${spring.version}
		

		
			org.springframework
			spring-webmvc
			${spring.version}
		

		
		
			org.codehaus.jackson
			jackson-mapper-asl
			${jackson.version}
		

	

3. Spring MVC – Поставщик данных

Контроллер Spring, если пользователь отправит запрос ” /получить теги “, Spring отфильтрует результат с помощью пользовательского ввода и вернет его в формате JSON.

package com.mkyong.web.controller;

import java.util.ArrayList;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

import com.mkyong.web.domain.Tag;

@Controller
public class MainController {

	List data = new ArrayList();

	MainController() {
		// init data for testing
		data.add(new Tag(1, "ruby"));
		data.add(new Tag(2, "rails"));
		data.add(new Tag(3, "c / c++"));
		data.add(new Tag(4, ".net"));
		data.add(new Tag(5, "python"));
		data.add(new Tag(6, "java"));
		data.add(new Tag(7, "javascript"));
		data.add(new Tag(8, "jscript"));

	}

	@RequestMapping(value = "/", method = RequestMethod.GET)
	public ModelAndView getPages() {

		ModelAndView model = new ModelAndView("example");
		return model;

	}

	@RequestMapping(value = "/getTags", method = RequestMethod.GET)
	public @ResponseBody
	List getTags(@RequestParam String tagName) {

		return simulateSearchResult(tagName);

	}

	private List simulateSearchResult(String tagName) {

		List result = new ArrayList();

		// iterate a list and filter by tagName
		for (Tag tag : data) {
			if (tag.getTagName().contains(tagName)) {
				result.add(tag);
			}
		}

		return result;
	}

}

package com.mkyong.web.domain;

public class Tag {

	public int id;
	public String tagName;

	//getter and setter methods

	public Tag(int id, String tagName) {
		this.id = id;
		this.tagName = tagName;
	}

}


	

	
		
			/WEB-INF/pages/
		
		
			.jsp
		
	

	

	


4. Плагин автозаполнения jQuery

Страница JSP ниже должна быть понятной.

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>


">
">
" rel="stylesheet">


  

Spring MVC + jQuery + Autocomplete example

#1. Плагин автозаполнения сгенерирует список предложений со следующими HTML-тегами.

...
...
...

Итак, вам нужно оформить его, например:

.autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; }
.autocomplete-suggestion { padding: 5px 5px; white-space: nowrap; overflow: hidden; font-size:22px}
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { font-weight: bold; color: #3399FF; }

#2. Для этого “плагина автозаполнения” ответ от сервера должен быть отформатированным в формате JSON объектом JavaScript, подобным этому:

{
    suggestions: [
        { value: "Java",        data: "1001" },
        { value: "JavaScript",  data: "1002" },
        { value: "Ruby",        data: "1003" }
    ]
}

#3. Просмотрите следующий запрос Ajax

  $('#w-input-search').autocomplete({
	serviceUrl: '${pageContext.request.contextPath}/getTags',
	paramName: "tagName", // ?tagName='user input'
	delimiter: ",",
	transformResult: function(response) {
		    	
	   return {
		        	
	      suggestions: $.map($.parseJSON(response), function(item) {     
		 return { value: item.tagName, data: item.id };
	      })
		            
	   };
		        
	}	    
   });
  1. serviceUrl – URL-адрес на стороне сервера или функция обратного вызова, которая возвращает данные JSON.
  2. Имя параметра – В этом случае он будет генерировать getTags?Имя параметра= ввод пользователя . Значение по умолчанию равно ? запрос= пользовательский ввод .
  3. разделитель – Для нескольких предложений.
  4. $.parseJSON (ответ) – Java вернет данные в формате JSON, поэтому вам нужно преобразовать их в объект JavaScript.

5. Демонстрация

Запуск и доступ” http://localhost:8080/SpringMvcExample/ “.

Введите ” java

Введите ” r

Скачать Исходный Код

Рекомендации

  1. Плагин автозаполнения jQuery
  2. Создайте простое Автозаполнение С помощью HTML5 & jQuery
  3. 35+ Лучший учебник по автозаполнению Ajax jQuery и плагин с примерами
  4. Пример jQuery $.Синтаксический анализ
  5. jQuery$.карта () пример
  6. jQuery $.каждый() пример
  7. Википедия: JSON

Оригинал: “https://mkyong.com/spring-mvc/spring-mvc-jquery-autocomplete-example/”