Как я могу реализовать функцию автозаполнения аэропорта в JSP? - PullRequest
Новая
       8

Как я могу реализовать функцию автозаполнения аэропорта в JSP?

0 голосов
/ 19 января 2019

Я пытаюсь внедрить фрагмент кода из codepen (https://codepen.io/anon/pen/EGqXxE)) в мое веб-приложение java. Однако, когда я загружаю страницу, предложений нет, и кажется, что ничего не происходит. Есть идеи?

Я добавил код javascript в код auto-complete.js и css (хотя позже я не планирую использовать этот css) в файл auto-complete.css и импортировал их в свой jsp, но это не такКажется, что работает. Кроме того, я нашел некоторые импортированные js-скрипты в этом коде ручки (не очень знакомы с codepen), поэтому я попытался импортировать их, но это тоже не сработало. 

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Upload Page</title>
        <link type="text/css" rel="stylesheet" href="<c:url value="/resources/css/auto-complete.css" />" >

</head>
    <body>

        <div class="form-group">
          <label class="control-label">Enter an Airport</label>
          <input id="autocomplete" class="autocomplete-airport" type="text" />
        </div>
        <script src="<c:url value="/resources/js/auto-complete.js" />"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.1/lodash.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script src="https://unpkg.com/fuse.js@2.5.0/src/fuse.min.js"></script>
        <script src="https://screenfeedcontent.blob.core.windows.net/html/airports.js"></script>
    </body>
</html>

Яожидая увидеть предлагаемые аэропорты, как показано в этом демонстрационном коде, здесь: https://codepen.io/anon/pen/EGqXxE.

Кредиты в коде: CAPTAIN ANONYMOUS.

1 Ответ

0 голосов
/ 20 января 2019

Чтобы получить данные для автозаполнения, выполните следующие действия.

Ex. index.jsp 

<!DOCTYPE html>
<html lang="en">    
<head>
<meta charset="UTF-8">
<title>Airport Autocomplete</title>    
<link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">    
<link rel="stylesheet" href="css/style.css"> 
</head>
<body>
    <div class="form-group">
        <label class="control-label">Enter an Airport</label> <input
            id="autocomplete" class="autocomplete" type="text" />
    </div>
    <div class="form-group">
        <label class="control-label">Enter something else</label> <input
            id="autocomplete2" class="autocomplete" type="text" />
    </div>
    <div class="form-group">
        <label class="control-label">Another field (so we can test TAB
            behavior)</label> <input type="text" />
    </div>
    <script
        src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.1/lodash.min.js'></script>
    <script
        src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
    <script src='https://unpkg.com/fuse.js@2.5.0/src/fuse.min.js'></script>
    <script
        src='https://screenfeedcontent.blob.core.windows.net/html/airports.js'></script>

CSS / style.css 

body {
  margin: 50px;
}

.form-group {
  margin-bottom: 20px;
}

.control-label {
  display: block;
}

.autocomplete-wrapper {
  position: relative;
}
.autocomplete-wrapper input {
  width: 100%;
}

.autocomplete-results {
  position: absolute;
  background: white;
  z-index: 1;
  top: 100%;
  left: 0;
  font-size: 13px;
  border: solid 1px #ddd;
  border-top-width: 0;
  border-bottom-color: #ccc;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.autocomplete-result {
  padding: 12px 15px;
  border-bottom: solid 1px #eee;
  cursor: pointer;
}

.autocomplete-result:last-child {
  border-bottom-width: 0;
}

.autocomplete-location {
  opacity: .8;
  font-size: smaller;
}

.autocomplete-results[data-highlight='0'] > :nth-child(1) {
  color: white;
  background: #26C9FF;
  border-bottom-color: #26C9FF;
  outline: solid 1px #00b6f2;
}

.autocomplete-results[data-highlight='1'] > :nth-child(2) {
  color: white;
  background: #26C9FF;
  border-bottom-color: #26C9FF;
  outline: solid 1px #00b6f2;
}

.autocomplete-results[data-highlight='2'] > :nth-child(3) {
  color: white;
  background: #26C9FF;
  border-bottom-color: #26C9FF;
  outline: solid 1px #00b6f2;
}

.autocomplete-results[data-highlight='3'] > :nth-child(4) {
  color: white;
  background: #26C9FF;
  border-bottom-color: #26C9FF;
  outline: solid 1px #00b6f2;
}

.autocomplete-results[data-highlight='4'] > :nth-child(5) {
  color: white;
  background: #26C9FF;
  border-bottom-color: #26C9FF;
  outline: solid 1px #00b6f2;
}

.autocomplete-results[data-highlight='5'] > :nth-child(6) {
  color: white;
  background: #26C9FF;
  border-bottom-color: #26C9FF;
  outline: solid 1px #00b6f2;
}

.autocomplete-results[data-highlight='6'] > :nth-child(7) {
  color: white;
  background: #26C9FF;
  border-bottom-color: #26C9FF;
  outline: solid 1px #00b6f2;
}

.autocomplete-results[data-highlight='7'] > :nth-child(8) {
  color: white;
  background: #26C9FF;
  border-bottom-color: #26C9FF;
  outline: solid 1px #00b6f2;
}

JS / index.js 

var options = {
  shouldSort: true,
  threshold: 0.4,
  maxPatternLength: 32,
  keys: [{
    name: 'iata',
    weight: 0.5
  }, {
    name: 'name',
    weight: 0.3
  }, {
    name: 'city',
    weight: 0.2
  }]
};

var fuse = new Fuse(airports, options)

$('.autocomplete').each(function() {
  var ac = $(this);

   ac.on('click', function(e) {
    e.stopPropagation();
  })
  .on('focus keyup', search)
  .on('keydown', onKeyDown);

  var wrap = $('<div>')
    .addClass('autocomplete-wrapper')
    .insertBefore(ac)
    .append(ac);

    var list = $('<div>')
      .addClass('autocomplete-results')
      .on('click', '.autocomplete-result', function(e) {
        e.preventDefault();
        e.stopPropagation();
        selectIndex($(this).data('index'), ac);
    })
    .appendTo(wrap);
});

$(document)
  .on('mouseover', '.autocomplete-result', function(e) {
    var index = parseInt($(this).data('index'), 10);
    if (!isNaN(index)) {
      $(this).attr('data-highlight', index);
    }
  })
  .on('click', clearResults);

function clearResults() {
  results = [];
  numResults = 0;
  $('.autocomplete-results').empty();
}

function selectIndex(index, autoinput) {
  if (results.length >= index + 1) {
    autoinput.val(results[index].iata);
    clearResults();
  }  
}

var results = [];
var numResults = 0;
var selectedIndex = -1;

function search(e) {
  if (e.which === 38 || e.which === 13 || e.which === 40) {
    return;
  }
  var ac = $(e.target);
  var list = ac.next();
  if (ac.val().length > 0) {
    results = _.take(fuse.search(ac.val()), 7);
    numResults = results.length;

    var divs = results.map(function(r, i) {
        return '<div class="autocomplete-result" data-index="'+ i +'">'
             + '<div><b>'+ r.iata +'</b> - '+ r.name +'</div>'
             + '<div class="autocomplete-location">'+ r.city +', '+ r.country +'</div>'
             + '</div>';
     });

    selectedIndex = -1;
    list.html(divs.join(''))
      .attr('data-highlight', selectedIndex);

  } else {
    numResults = 0;
    list.empty();
  }
}

function onKeyDown(e) {
  var ac = $(e.currentTarget);
  var list = ac.next();
  switch(e.which) {
    case 38: // up
      selectedIndex--;
      if (selectedIndex <= -1) {
        selectedIndex = -1;
      }
      list.attr('data-highlight', selectedIndex);
      break;
    case 13: // enter
      selectIndex(selectedIndex, ac);
      break;
    case 9: // enter
      selectIndex(selectedIndex, ac);
      e.stopPropagation();
      return;
    case 40: // down
      selectedIndex++;
      if (selectedIndex >= numResults) {
        selectedIndex = numResults-1;
      }
      list.attr('data-highlight', selectedIndex);
      break;

    default: return; // exit this handler for other keys
  }
  e.stopPropagation();
  e.preventDefault(); // prevent the default action (scroll / move caret)
}
...