如何在 JSP 中实现机场自动完成功能？

Question

我正在尝试将 codepen(https://codepen.io/anon/pen/EGqXxE) 中的代码片段实施到我的 java 网络应用程序中。但是，当我加载页面时，没有任何建议，似乎什么也没有发生。有什么想法吗？

我将 java 脚本代码添加到自动 complete.js 和 css 代码中（不过，我不打算稍后使用此 css）到一个auto-complete.css 文件并将它们导入我的 jsp，但它似乎不起作用。另外，我在这个codepen中发现了一些导入的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。

Codepen 致谢：CAPTAIN ANONYMOUS。

Answer 1

要获取自动补全数据，请按以下方式实现。

例如。 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)
}

如何在 JSP 中实现机场自动完成功能？

How can I implement airport auto-complete function in JSP?

javascript

jsp

codepen