How can I implement airport auto-complete function in JSP?
0
I am trying to implement a code snippet from codepen(https://codepen.io/anon/pen/EGqXxE) into my java web application. However, when I load the page, there is no suggestion and nothing seems to happen. Any ideas ?
I added the javascript code into an auto-complete.js and css code (though, I do not plan on using this css later) into an auto-complete.css file and imported them in my jsp, but it does not seem to work. Furthermore, I found some imported js scripts in this codepen(not very familiar with codepen), so I tried importing those as well, but that didn't work either.
<%@ 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>
I am expecting to see suggested airports as shown in this codepen demo here: https://codepen.io/anon/pen/EGqXxE.
Codepen credits: CAPTAIN ANONYMOUS.
javascript jsp codepen
asked Jan 19 at 18:23
Lucian CoandaLucian Coanda
277
add a comment |
0
I am trying to implement a code snippet from codepen(https://codepen.io/anon/pen/EGqXxE) into my java web application. However, when I load the page, there is no suggestion and nothing seems to happen. Any ideas ?
I added the javascript code into an auto-complete.js and css code (though, I do not plan on using this css later) into an auto-complete.css file and imported them in my jsp, but it does not seem to work. Furthermore, I found some imported js scripts in this codepen(not very familiar with codepen), so I tried importing those as well, but that didn't work either.
<%@ 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>
I am expecting to see suggested airports as shown in this codepen demo here: https://codepen.io/anon/pen/EGqXxE.
Codepen credits: CAPTAIN ANONYMOUS.
javascript jsp codepen
asked Jan 19 at 18:23
Lucian CoandaLucian Coanda
277
add a comment |
0
0
0
I am trying to implement a code snippet from codepen(https://codepen.io/anon/pen/EGqXxE) into my java web application. However, when I load the page, there is no suggestion and nothing seems to happen. Any ideas ?
I added the javascript code into an auto-complete.js and css code (though, I do not plan on using this css later) into an auto-complete.css file and imported them in my jsp, but it does not seem to work. Furthermore, I found some imported js scripts in this codepen(not very familiar with codepen), so I tried importing those as well, but that didn't work either.
<%@ 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>
I am expecting to see suggested airports as shown in this codepen demo here: https://codepen.io/anon/pen/EGqXxE.
Codepen credits: CAPTAIN ANONYMOUS.
javascript jsp codepen
asked Jan 19 at 18:23
Lucian CoandaLucian Coanda
277
I am trying to implement a code snippet from codepen(https://codepen.io/anon/pen/EGqXxE) into my java web application. However, when I load the page, there is no suggestion and nothing seems to happen. Any ideas ?
I added the javascript code into an auto-complete.js and css code (though, I do not plan on using this css later) into an auto-complete.css file and imported them in my jsp, but it does not seem to work. Furthermore, I found some imported js scripts in this codepen(not very familiar with codepen), so I tried importing those as well, but that didn't work either.
<%@ 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>
I am expecting to see suggested airports as shown in this codepen demo here: https://codepen.io/anon/pen/EGqXxE.
Codepen credits: CAPTAIN ANONYMOUS.
javascript jsp codepen
javascript jsp codepen
asked Jan 19 at 18:23
Lucian CoandaLucian Coanda
277
asked Jan 19 at 18:23
Lucian CoandaLucian Coanda
277
asked Jan 19 at 18:23
Lucian CoandaLucian Coanda
277
asked Jan 19 at 18:23
Lucian CoandaLucian Coanda
277
asked Jan 19 at 18:23
Lucian CoandaLucian Coanda
277
277
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
1
To get auto complete data,implement following way.
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)
}
answered Jan 20 at 5:44
SanjaySanjay
1,3321819
Thank you, this works as expected. what was the problem ?
– Lucian Coanda
Jan 20 at 17:46
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54270082%2fhow-can-i-implement-airport-auto-complete-function-in-jsp%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
To get auto complete data,implement following way.
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)
}
answered Jan 20 at 5:44
SanjaySanjay
1,3321819
Thank you, this works as expected. what was the problem ?
– Lucian Coanda
Jan 20 at 17:46
add a comment |
1
To get auto complete data,implement following way.
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)
}
answered Jan 20 at 5:44
SanjaySanjay
1,3321819
Thank you, this works as expected. what was the problem ?
– Lucian Coanda
Jan 20 at 17:46
add a comment |
1
1
1
To get auto complete data,implement following way.
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)
}
answered Jan 20 at 5:44
SanjaySanjay
1,3321819
To get auto complete data,implement following way.
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)
}
answered Jan 20 at 5:44
SanjaySanjay
1,3321819
answered Jan 20 at 5:44
SanjaySanjay
1,3321819
answered Jan 20 at 5:44
SanjaySanjay
1,3321819
answered Jan 20 at 5:44
SanjaySanjay
1,3321819
1,3321819
Thank you, this works as expected. what was the problem ?
– Lucian Coanda
Jan 20 at 17:46
add a comment |
Thank you, this works as expected. what was the problem ?
– Lucian Coanda
Jan 20 at 17:46
Thank you, this works as expected. what was the problem ?
– Lucian Coanda
Jan 20 at 17:46
Thank you, this works as expected. what was the problem ?
– Lucian Coanda
Jan 20 at 17:46
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54270082%2fhow-can-i-implement-airport-auto-complete-function-in-jsp%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
