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

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

javascript jsp

Javascript 如何在JSP中实现机场自动完成功能？,javascript,jsp,codepen,Javascript,Jsp,Codepen,我正在尝试将codepen（）中的代码片段实现到java web应用程序中。然而，当我加载页面时，没有任何建议，似乎什么也没有发生。有什么想法吗我将javascript代码添加到auto-complete.js中，并将css代码（尽管我不打算稍后使用此css）添加到auto-complete.css文件中，并将它们导入到我的jsp中，但它似乎不起作用。此外，我在这个codepen中发现了一些导入的js脚本（对codepen不太熟悉），所以我也尝试导入这些脚本，但也不起作用 <%@ pag

我正在尝试将codepen（）中的代码片段实现到java web应用程序中。然而，当我加载页面时，没有任何建议，似乎什么也没有发生。有什么想法吗

我将javascript代码添加到auto-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>


上传页面
进入机场

我希望看到建议的机场，如这里的codepen演示所示：

Codepen credits:CAPTAIN ANONYMOUS.

要获取自动完成的数据，请实现以下方法

例如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>

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)
}

var选项={
应该排序：是的，
阈值：0.4，
最大模式长度：32，
关键点：[{
名称：“国际航空运输协会”，
重量：0.5
}, {
姓名：'姓名'，
重量：0.3
}, {
名称：'城市'，
重量：0.2
}]
};
var保险丝=新保险丝（机场、选装件）
$（'.autocomplete'）。每个（函数（）{
var ac=$（本）；
ac.on（'点击'）功能（e）{
e、 停止传播（）；
})
.on（'focus keyup'，search）
.on（'keydown'，onKeyDown）；
var wrap=$（''）
.addClass（'autocomplete-wrapper'）
.insertBefore（ac）
.附加（ac）；
变量列表=$（''）
.addClass（'autocomplete-results'）
.on（'click'，'autocomplete result'，函数（e）{
e、 预防默认值（）；
e、 停止传播（）；
选择索引（$（this）.data（'index'），ac）；
})
.附件（包装）；
});
$（文件）
.on（'mouseover'，'.autocomplete result'，函数（e）{
var index=parseInt（$（this）.data（'index'），10）；
如果（！isNaN（索引））{
$（this）.attr（'data-highlight'，index）；
}
})
。打开（“单击”，清除结果）；
函数clearResults（）{
结果=[]；
numResults=0；
$（'.autocomplete results'）.empty（）；
}
功能选择索引（索引，自动输入）{
如果（results.length>=索引+1）{
autoinput.val（结果[索引].iata）；
clearResults（）；
}  
}
var结果=[]；
var numResults=0；
var selectedIndex=-1；
功能搜索（e）{
如果（e.which==38 | | e.which==13 | | e.which==40）{
返回；
}
var ac=$（e.target）；
var list=ac.next（）；
如果（ac.val（）.length>0）{
结果=u.take（fuse.search（ac.val（）），7）；
numResults=results.length；
var divs=results.map（函数（r，i）{
返回“”
+'+r.iata+'-'+r.name+''
+“+r.城市+”，“+r.国家+”
+ '';
});
selectedIndex=-1；
html（divs.join（“”））
.attr（'data-highlight'，selectedIndex）；
}否则{
numResults=0；
list.empty（）；
}
}
函数onKeyDown（e）{
var ac=$（e.currentTarget）；
var list=ac.next（）；
开关（e.which）{
案例38://以上
选择索引--；
如果（selectedIndex=numResults）{
selectedIndex=numResults-1；
}
list.attr（'data-highlight'，selectedIndex）；
打破
默认值：return；//退出其他键的处理程序
}
e、 停止传播（）；
e、 preventDefault（）；//防止默认操作（滚动/移动插入符号）
}

谢谢，这一切正常。出了什么问题？

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)
}