simple auto-completion for the search box
This commit is contained in:
@@ -2,9 +2,17 @@ package org.lucares.pdbui;
|
||||
|
||||
import java.io.File;
|
||||
import java.nio.file.Path;
|
||||
import java.util.ArrayList;
|
||||
import java.util.Collections;
|
||||
import java.util.List;
|
||||
|
||||
import org.lucares.ludb.Proposal;
|
||||
import org.lucares.pdbui.domain.AutocompleteProposal;
|
||||
import org.lucares.pdbui.domain.AutocompleteProposalByValue;
|
||||
import org.lucares.pdbui.domain.AutocompleteResponse;
|
||||
import org.lucares.pdbui.domain.PlotRequest;
|
||||
import org.lucares.pdbui.domain.PlotResponse;
|
||||
import org.lucares.performance.db.CollectionUtils;
|
||||
import org.lucares.recommind.logs.InternalPlottingException;
|
||||
import org.lucares.recommind.logs.Plotter;
|
||||
import org.springframework.boot.autoconfigure.EnableAutoConfiguration;
|
||||
@@ -13,15 +21,18 @@ import org.springframework.stereotype.Controller;
|
||||
import org.springframework.web.bind.annotation.RequestBody;
|
||||
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;
|
||||
|
||||
@Controller
|
||||
@EnableAutoConfiguration
|
||||
public class PdbController implements HardcodedValues {
|
||||
public class PdbController implements HardcodedValues, CollectionUtils {
|
||||
|
||||
private final Plotter plotter;
|
||||
private final PdbRepository db;
|
||||
|
||||
public PdbController(final Plotter plotter) {
|
||||
public PdbController(final PdbRepository db, final Plotter plotter) {
|
||||
this.db = db;
|
||||
this.plotter = plotter;
|
||||
}
|
||||
|
||||
@@ -34,8 +45,12 @@ public class PdbController implements HardcodedValues {
|
||||
PlotResponse createPlot(@RequestBody final PlotRequest request) {
|
||||
|
||||
try {
|
||||
System.out.println(request.getQuery());
|
||||
final File image = plotter.plot(request.getQuery(), request.getHeight(), request.getWidth());
|
||||
final String query = request.getQuery();
|
||||
final int height = request.getHeight();
|
||||
final int width = request.getWidth();
|
||||
|
||||
System.out.println(query);
|
||||
final File image = plotter.plot(query, height, width);
|
||||
|
||||
final Path relativeImagePath = plotter.getOutputDir().relativize(image.toPath());
|
||||
return new PlotResponse(WEB_IMAGE_OUTPUT_PATH + "/" + relativeImagePath.toString());
|
||||
@@ -45,4 +60,47 @@ public class PdbController implements HardcodedValues {
|
||||
}
|
||||
}
|
||||
|
||||
@RequestMapping(path = "/autocomplete", //
|
||||
method = RequestMethod.GET, //
|
||||
consumes = MediaType.APPLICATION_FORM_URLENCODED_VALUE, //
|
||||
produces = MediaType.APPLICATION_JSON_UTF8_VALUE //
|
||||
)
|
||||
@ResponseBody
|
||||
AutocompleteResponse autocomplete(@RequestParam(name = "query") final String query,
|
||||
@RequestParam(name = "caretIndex") final int caretIndex) {
|
||||
|
||||
try {
|
||||
final AutocompleteResponse result = new AutocompleteResponse();
|
||||
final int zeroBasedCaretIndex = caretIndex - 1;
|
||||
|
||||
final List<Proposal> proposals = db.autocomplete(query, zeroBasedCaretIndex);
|
||||
final List<Proposal> nonEmptyProposals = filter(proposals, p -> p.getResults() > 0);
|
||||
|
||||
final List<AutocompleteProposal> autocompleteProposals = toAutocompleteProposals(nonEmptyProposals);
|
||||
Collections.sort(autocompleteProposals, new AutocompleteProposalByValue());
|
||||
|
||||
result.setProposals(autocompleteProposals);
|
||||
return result;
|
||||
|
||||
} catch (final Exception e) {
|
||||
e.printStackTrace();
|
||||
throw new InternalServerError(e);
|
||||
}
|
||||
}
|
||||
|
||||
private List<AutocompleteProposal> toAutocompleteProposals(final List<Proposal> proposals) {
|
||||
|
||||
final List<AutocompleteProposal> result = new ArrayList<>();
|
||||
|
||||
for (final Proposal proposal : proposals) {
|
||||
final AutocompleteProposal e = new AutocompleteProposal();
|
||||
e.setValue(proposal.getProposedTag());
|
||||
e.setProposedQuery(proposal.getProposedQuery());
|
||||
|
||||
result.add(e);
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -2,7 +2,9 @@ package org.lucares.pdbui;
|
||||
|
||||
import java.nio.file.Path;
|
||||
import java.nio.file.Paths;
|
||||
import java.util.List;
|
||||
|
||||
import org.lucares.ludb.Proposal;
|
||||
import org.lucares.performance.db.PerformanceDb;
|
||||
import org.springframework.beans.factory.DisposableBean;
|
||||
import org.springframework.beans.factory.annotation.Value;
|
||||
@@ -21,6 +23,10 @@ public class PdbRepository implements DisposableBean {
|
||||
return db;
|
||||
}
|
||||
|
||||
public List<Proposal> autocomplete(final String query, final int caretIndex) {
|
||||
return db.autocomplete(query, caretIndex);
|
||||
}
|
||||
|
||||
@Override
|
||||
public void destroy() {
|
||||
db.close();
|
||||
|
||||
@@ -0,0 +1,27 @@
|
||||
package org.lucares.pdbui.domain;
|
||||
|
||||
public class AutocompleteProposal {
|
||||
private String value;
|
||||
private String proposedQuery;
|
||||
|
||||
public String getValue() {
|
||||
return value;
|
||||
}
|
||||
|
||||
public void setValue(final String value) {
|
||||
this.value = value;
|
||||
}
|
||||
|
||||
@Override
|
||||
public String toString() {
|
||||
return value;
|
||||
}
|
||||
|
||||
public void setProposedQuery(final String proposedQuery) {
|
||||
this.proposedQuery = proposedQuery;
|
||||
}
|
||||
|
||||
public String getProposedQuery() {
|
||||
return proposedQuery;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
package org.lucares.pdbui.domain;
|
||||
|
||||
import java.util.Comparator;
|
||||
|
||||
public class AutocompleteProposalByValue implements Comparator<AutocompleteProposal> {
|
||||
|
||||
@Override
|
||||
public int compare(final AutocompleteProposal o1, final AutocompleteProposal o2) {
|
||||
return o1.getValue().compareToIgnoreCase(o2.getValue());
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
package org.lucares.pdbui.domain;
|
||||
|
||||
import java.util.List;
|
||||
|
||||
public class AutocompleteResponse {
|
||||
private List<AutocompleteProposal> proposals;
|
||||
|
||||
public List<AutocompleteProposal> getProposals() {
|
||||
return proposals;
|
||||
}
|
||||
|
||||
public void setProposals(final List<AutocompleteProposal> proposals) {
|
||||
this.proposals = proposals;
|
||||
}
|
||||
|
||||
@Override
|
||||
public String toString() {
|
||||
return String.valueOf(proposals);
|
||||
}
|
||||
|
||||
}
|
||||
1
pdb-ui/src/main/resources/resources/css/autocomplete.min.css
vendored
Normal file
1
pdb-ui/src/main/resources/resources/css/autocomplete.min.css
vendored
Normal file
@@ -0,0 +1 @@
|
||||
.autocomplete,.autocomplete.open{transition:all .5s ease 0s;overflow-y:hidden}.autocomplete{position:absolute;max-height:0;transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(0,1,.5,1)}.autocomplete.open{display:block;background-color:#FAFAFA;max-height:500px;transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(0,1,.5,1)}.autocomplete.open:empty,.autocomplete:empty{display:none}.autocomplete:active,.autocomplete:focus,.autocomplete:hover{background-color:#FAFAFA;transition:all .5s ease 0s}.autocomplete>ul{list-style-type:none;margin:0;padding:0}.autocomplete>ul>li{cursor:pointer;padding:5px 0 5px 10px}.autocomplete>ul>li.locked{cursor:inherit}.autocomplete>ul>li.active,.autocomplete>ul>li:active,.autocomplete>ul>li:focus,.autocomplete>ul>li:hover{background-color:#EEE;transition:all .5s ease 0s}.autocomplete>ul>li.active a:active,.autocomplete>ul>li.active a:focus,.autocomplete>ul>li.active a:hover,.autocomplete>ul>li:active a:active,.autocomplete>ul>li:active a:focus,.autocomplete>ul>li:active a:hover,.autocomplete>ul>li:focus a:active,.autocomplete>ul>li:focus a:focus,.autocomplete>ul>li:focus a:hover,.autocomplete>ul>li:hover a:active,.autocomplete>ul>li:hover a:focus,.autocomplete>ul>li:hover a:hover{text-decoration:none}input[data-autocomplete]{border-color:grey;border-style:none none solid;border-width:0 0 1px;margin:0;padding:5px;width:100%}
|
||||
@@ -49,6 +49,17 @@ html, body {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#search-input-wrapper {
|
||||
text-align: left;
|
||||
display: flex;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#search-input-wrapper .autocomplete {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
|
||||
#search-bar #search-submit {
|
||||
margin-right:3px;
|
||||
}
|
||||
|
||||
@@ -3,10 +3,12 @@
|
||||
<head>
|
||||
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
|
||||
<script type="text/javascript" src="js/search.js"></script>
|
||||
<script type="text/javascript" src="js/autocomplete.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="css/typography.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/design.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/icons.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/loading.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/autocomplete.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="content">
|
||||
@@ -14,7 +16,10 @@
|
||||
<div id="logo">LOGO</div>
|
||||
</div>
|
||||
<div id="search-bar">
|
||||
<textarea id="search-query">method=AuditService.logEvent</textarea>
|
||||
<div id="search-input-wrapper">
|
||||
<input id="search-input" data-autocomplete="autocomplete"
|
||||
data-autocomplete-empty-message="nothing found" />
|
||||
</div>
|
||||
<button id="search-submit"><i class="fa fa-search"> Search</i></button>
|
||||
</div>
|
||||
<div id="result-view">
|
||||
|
||||
5
pdb-ui/src/main/resources/resources/js/.gitignore
vendored
Normal file
5
pdb-ui/src/main/resources/resources/js/.gitignore
vendored
Normal file
@@ -0,0 +1,5 @@
|
||||
/horsey-master/
|
||||
/horsey-master.zip
|
||||
/autocomplete.js-2.1.0/
|
||||
/autocomplete.js-2.1.0.zip
|
||||
/search.js
|
||||
449
pdb-ui/src/main/resources/resources/js/autocomplete.js
Normal file
449
pdb-ui/src/main/resources/resources/js/autocomplete.js
Normal file
@@ -0,0 +1,449 @@
|
||||
(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.AutoComplete = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
|
||||
/*
|
||||
* @license MIT
|
||||
*
|
||||
* Autocomplete.js v2.1.0
|
||||
* Developed by Baptiste Donaux
|
||||
* https://autocomplete-js.com
|
||||
*
|
||||
* (c) 2016, Baptiste Donaux
|
||||
*/
|
||||
"use strict";
|
||||
var ConditionOperator;
|
||||
(function (ConditionOperator) {
|
||||
ConditionOperator[ConditionOperator["AND"] = 0] = "AND";
|
||||
ConditionOperator[ConditionOperator["OR"] = 1] = "OR";
|
||||
})(ConditionOperator || (ConditionOperator = {}));
|
||||
/**
|
||||
* Core
|
||||
*
|
||||
* @class
|
||||
* @author Baptiste Donaux <baptiste.donaux@gmail.com> @baptistedonaux
|
||||
*/
|
||||
var AutoComplete = (function () {
|
||||
// Constructor
|
||||
function AutoComplete(params, selector) {
|
||||
if (params === void 0) { params = {}; }
|
||||
if (selector === void 0) { selector = "[data-autocomplete]"; }
|
||||
if (Array.isArray(selector)) {
|
||||
selector.forEach(function (s) {
|
||||
new AutoComplete(params, s);
|
||||
});
|
||||
}
|
||||
else if (typeof selector == "string") {
|
||||
var elements = document.querySelectorAll(selector);
|
||||
Array.prototype.forEach.call(elements, function (input) {
|
||||
new AutoComplete(params, input);
|
||||
});
|
||||
}
|
||||
else {
|
||||
AutoComplete.prototype.create(AutoComplete.merge(AutoComplete.defaults, params, {
|
||||
DOMResults: document.createElement("div")
|
||||
}), selector);
|
||||
}
|
||||
}
|
||||
AutoComplete.prototype.create = function (params, element) {
|
||||
params.Input = element;
|
||||
if (params.Input.nodeName.match(/^INPUT$/i) && (params.Input.hasAttribute("type") === false || params.Input.getAttribute("type").match(/^TEXT|SEARCH$/i))) {
|
||||
params.Input.setAttribute("autocomplete", "off");
|
||||
params._Position(params);
|
||||
params.Input.parentNode.appendChild(params.DOMResults);
|
||||
params.$Listeners = {
|
||||
blur: params._Blur.bind(params),
|
||||
destroy: AutoComplete.prototype.destroy.bind(null, params),
|
||||
focus: params._Focus.bind(params),
|
||||
keyup: AutoComplete.prototype.event.bind(null, params),
|
||||
keydown: function (event) {
|
||||
if (event.keyCode == 38 || event.keyCode == 40) {
|
||||
event.preventDefault();
|
||||
}
|
||||
},
|
||||
position: params._Position.bind(params)
|
||||
};
|
||||
for (var event in params.$Listeners) {
|
||||
params.Input.addEventListener(event, params.$Listeners[event]);
|
||||
}
|
||||
}
|
||||
};
|
||||
AutoComplete.prototype.event = function (params, event) {
|
||||
var eventIdentifier = function (condition) {
|
||||
if ((match === true && mapping.Operator == ConditionOperator.AND) || (match === false && ConditionOperator.OR)) {
|
||||
condition = AutoComplete.merge({
|
||||
Not: false
|
||||
}, condition);
|
||||
if (condition.hasOwnProperty("Is")) {
|
||||
if (condition.Is == event.keyCode) {
|
||||
match = !condition.Not;
|
||||
}
|
||||
else {
|
||||
match = condition.Not;
|
||||
}
|
||||
}
|
||||
else if (condition.hasOwnProperty("From") && condition.hasOwnProperty("To")) {
|
||||
if (event.keyCode >= condition.From && event.keyCode <= condition.To) {
|
||||
match = !condition.Not;
|
||||
}
|
||||
else {
|
||||
match = condition.Not;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
for (var name in params.KeyboardMappings) {
|
||||
var mapping = AutoComplete.merge({
|
||||
Operator: ConditionOperator.AND
|
||||
}, params.KeyboardMappings[name]), match = ConditionOperator.AND == mapping.Operator;
|
||||
mapping.Conditions.forEach(eventIdentifier);
|
||||
if (match === true) {
|
||||
mapping.Callback.bind(params, event)();
|
||||
}
|
||||
}
|
||||
};
|
||||
AutoComplete.prototype.ajax = function (params, callback, timeout) {
|
||||
if (timeout === void 0) { timeout = true; }
|
||||
if (params.$AjaxTimer) {
|
||||
window.clearTimeout(params.$AjaxTimer);
|
||||
}
|
||||
if (timeout === true) {
|
||||
params.$AjaxTimer = window.setTimeout(AutoComplete.prototype.ajax.bind(null, params, callback, false), params.Delay);
|
||||
}
|
||||
else {
|
||||
if (params.Request) {
|
||||
params.Request.abort();
|
||||
}
|
||||
var propertyHttpHeaders = Object.getOwnPropertyNames(params.HttpHeaders), method = params._HttpMethod(), url = params._Url(), queryParams = params._QueryArg() + "=" + params._Pre();
|
||||
if (method.match(/^GET$/i)) {
|
||||
url += "?" + queryParams;
|
||||
}
|
||||
params.Request = new XMLHttpRequest();
|
||||
params.Request.open(method, url, true);
|
||||
for (var i = propertyHttpHeaders.length - 1; i >= 0; i--) {
|
||||
params.Request.setRequestHeader(propertyHttpHeaders[i], params.HttpHeaders[propertyHttpHeaders[i]]);
|
||||
}
|
||||
params.Request.onreadystatechange = callback;
|
||||
params.Request.send(queryParams);
|
||||
}
|
||||
};
|
||||
AutoComplete.prototype.destroy = function (params) {
|
||||
for (var event in params.$Listeners) {
|
||||
params.Input.removeEventListener(event, params.$Listeners[event]);
|
||||
}
|
||||
params.DOMResults.parentNode.removeChild(params.DOMResults);
|
||||
};
|
||||
AutoComplete.merge = function () {
|
||||
var merge = {}, tmp;
|
||||
for (var i = 0; i < arguments.length; i++) {
|
||||
for (tmp in arguments[i]) {
|
||||
merge[tmp] = arguments[i][tmp];
|
||||
}
|
||||
}
|
||||
return merge;
|
||||
};
|
||||
AutoComplete.defaults = {
|
||||
Delay: 150,
|
||||
EmptyMessage: "No result here",
|
||||
Highlight: {
|
||||
getRegex: function (value) {
|
||||
return new RegExp(value, "ig");
|
||||
},
|
||||
transform: function (value) {
|
||||
return "<strong>" + value + "</strong>";
|
||||
}
|
||||
},
|
||||
HttpHeaders: {
|
||||
"Content-type": "application/x-www-form-urlencoded"
|
||||
},
|
||||
Limit: 0,
|
||||
HttpMethod: "GET",
|
||||
QueryArg: "q",
|
||||
Url: null,
|
||||
KeyboardMappings: {
|
||||
"Enter": {
|
||||
Conditions: [{
|
||||
Is: 13,
|
||||
Not: false
|
||||
}],
|
||||
Callback: function () {
|
||||
if (this.DOMResults.getAttribute("class").indexOf("open") != -1) {
|
||||
var liActive = this.DOMResults.querySelector("li.active");
|
||||
if (liActive !== null) {
|
||||
this._Select(liActive);
|
||||
this.DOMResults.setAttribute("class", "autocomplete");
|
||||
}
|
||||
}
|
||||
},
|
||||
Operator: ConditionOperator.AND
|
||||
},
|
||||
"KeyUpAndDown": {
|
||||
Conditions: [{
|
||||
Is: 38,
|
||||
Not: false
|
||||
},
|
||||
{
|
||||
Is: 40,
|
||||
Not: false
|
||||
}],
|
||||
Callback: function (event) {
|
||||
event.preventDefault();
|
||||
var first = this.DOMResults.querySelector("li:first-child:not(.locked)"), last = this.DOMResults.querySelector("li:last-child:not(.locked)"), active = this.DOMResults.querySelector("li.active");
|
||||
if (active) {
|
||||
var currentIndex = Array.prototype.indexOf.call(active.parentNode.children, active), position = currentIndex + (event.keyCode - 39), lisCount = this.DOMResults.getElementsByTagName("li").length;
|
||||
if (position < 0) {
|
||||
position = lisCount - 1;
|
||||
}
|
||||
else if (position >= lisCount) {
|
||||
position = 0;
|
||||
}
|
||||
active.setAttribute("class", "");
|
||||
active.parentElement.childNodes.item(position).setAttribute("class", "active");
|
||||
}
|
||||
else if (last && event.keyCode == 38) {
|
||||
last.setAttribute("class", "active");
|
||||
}
|
||||
else if (first) {
|
||||
first.setAttribute("class", "active");
|
||||
}
|
||||
},
|
||||
Operator: ConditionOperator.OR
|
||||
},
|
||||
"AlphaNum": {
|
||||
Conditions: [{
|
||||
Is: 13,
|
||||
Not: true
|
||||
}, {
|
||||
From: 35,
|
||||
To: 40,
|
||||
Not: true
|
||||
}],
|
||||
Callback: function () {
|
||||
var oldValue = this.Input.getAttribute("data-autocomplete-old-value"), currentValue = this._Pre();
|
||||
if (currentValue !== "") {
|
||||
if (!oldValue || currentValue != oldValue) {
|
||||
this.DOMResults.setAttribute("class", "autocomplete open");
|
||||
}
|
||||
AutoComplete.prototype.ajax(this, function () {
|
||||
if (this.Request.readyState == 4 && this.Request.status == 200) {
|
||||
this._Render(this._Post(this.Request.response));
|
||||
this._Open();
|
||||
}
|
||||
}.bind(this));
|
||||
}
|
||||
},
|
||||
Operator: ConditionOperator.AND
|
||||
}
|
||||
},
|
||||
DOMResults: null,
|
||||
Request: null,
|
||||
Input: null,
|
||||
/**
|
||||
* Return the message when no result returns
|
||||
*/
|
||||
_EmptyMessage: function () {
|
||||
var emptyMessage = "";
|
||||
if (this.Input.hasAttribute("data-autocomplete-empty-message")) {
|
||||
emptyMessage = this.Input.getAttribute("data-autocomplete-empty-message");
|
||||
}
|
||||
else if (this.EmptyMessage !== false) {
|
||||
emptyMessage = this.EmptyMessage;
|
||||
}
|
||||
else {
|
||||
emptyMessage = "";
|
||||
}
|
||||
return emptyMessage;
|
||||
},
|
||||
/**
|
||||
* Returns the maximum number of results
|
||||
*/
|
||||
_Limit: function () {
|
||||
var limit = this.Input.getAttribute("data-autocomplete-limit");
|
||||
if (isNaN(limit)) {
|
||||
return this.Limit;
|
||||
}
|
||||
return parseInt(limit);
|
||||
},
|
||||
/**
|
||||
* Apply transformation on labels response
|
||||
*/
|
||||
_Highlight: function (label) {
|
||||
return label.replace(this.Highlight.getRegex(this._Pre()), this.Highlight.transform);
|
||||
},
|
||||
/**
|
||||
* Returns the HHTP method to use
|
||||
*/
|
||||
_HttpMethod: function () {
|
||||
if (this.Input.hasAttribute("data-autocomplete-method")) {
|
||||
return this.Input.getAttribute("data-autocomplete-method");
|
||||
}
|
||||
return this.HttpMethod;
|
||||
},
|
||||
/**
|
||||
* Returns the query param to use
|
||||
*/
|
||||
_QueryArg: function () {
|
||||
if (this.Input.hasAttribute("data-autocomplete-param-name")) {
|
||||
return this.Input.getAttribute("data-autocomplete-param-name");
|
||||
}
|
||||
return this.QueryArg;
|
||||
},
|
||||
/**
|
||||
* Returns the URL to use for AJAX request
|
||||
*/
|
||||
_Url: function () {
|
||||
if (this.Input.hasAttribute("data-autocomplete")) {
|
||||
return this.Input.getAttribute("data-autocomplete");
|
||||
}
|
||||
return this.Url;
|
||||
},
|
||||
/**
|
||||
* Manage the close
|
||||
*/
|
||||
_Blur: function (now) {
|
||||
if (now === void 0) { now = false; }
|
||||
if (now) {
|
||||
this.DOMResults.setAttribute("class", "autocomplete");
|
||||
}
|
||||
else {
|
||||
var params = this;
|
||||
setTimeout(function () {
|
||||
params._Blur(true);
|
||||
}, 150);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Manage the open
|
||||
*/
|
||||
_Focus: function () {
|
||||
var oldValue = this.Input.getAttribute("data-autocomplete-old-value");
|
||||
if (!oldValue || this.Input.value != oldValue) {
|
||||
this.DOMResults.setAttribute("class", "autocomplete open");
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Bind all results item if one result is opened
|
||||
*/
|
||||
_Open: function () {
|
||||
var params = this;
|
||||
Array.prototype.forEach.call(this.DOMResults.getElementsByTagName("li"), function (li) {
|
||||
if (li.getAttribute("class") != "locked") {
|
||||
li.onclick = function () {
|
||||
params._Select(li);
|
||||
};
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Position the results HTML element
|
||||
*/
|
||||
_Position: function () {
|
||||
this.DOMResults.setAttribute("class", "autocomplete");
|
||||
this.DOMResults.setAttribute("style", "top:" + (this.Input.offsetTop + this.Input.offsetHeight) + "px;left:" + this.Input.offsetLeft + "px;width:" + this.Input.offsetWidth + "px;");
|
||||
},
|
||||
/**
|
||||
* Execute the render of results DOM element
|
||||
*/
|
||||
_Render: function (response) {
|
||||
var ul;
|
||||
if (typeof response == "string") {
|
||||
ul = this._RenderRaw(response);
|
||||
}
|
||||
else {
|
||||
ul = this._RenderResponseItems(response);
|
||||
}
|
||||
if (this.DOMResults.hasChildNodes()) {
|
||||
this.DOMResults.removeChild(this.DOMResults.childNodes[0]);
|
||||
}
|
||||
this.DOMResults.appendChild(ul);
|
||||
},
|
||||
/**
|
||||
* ResponseItems[] rendering
|
||||
*/
|
||||
_RenderResponseItems: function (response) {
|
||||
var ul = document.createElement("ul"), li = document.createElement("li");
|
||||
// Order
|
||||
if (this._Limit() < 0) {
|
||||
response = response.reverse();
|
||||
}
|
||||
for (var item = 0; item < response.length; item++) {
|
||||
li.innerHTML = response[item].Label;
|
||||
li.setAttribute("data-autocomplete-value", response[item].Value);
|
||||
ul.appendChild(li);
|
||||
li = document.createElement("li");
|
||||
}
|
||||
return ul;
|
||||
},
|
||||
/**
|
||||
* string response rendering (RAW HTML)
|
||||
*/
|
||||
_RenderRaw: function (response) {
|
||||
var ul = document.createElement("ul"), li = document.createElement("li");
|
||||
if (response.length > 0) {
|
||||
this.DOMResults.innerHTML = response;
|
||||
}
|
||||
else {
|
||||
var emptyMessage = this._EmptyMessage();
|
||||
if (emptyMessage !== "") {
|
||||
li.innerHTML = emptyMessage;
|
||||
li.setAttribute("class", "locked");
|
||||
ul.appendChild(li);
|
||||
}
|
||||
}
|
||||
return ul;
|
||||
},
|
||||
/**
|
||||
* Deal with request response
|
||||
*/
|
||||
_Post: function (response) {
|
||||
try {
|
||||
var returnResponse = [];
|
||||
//JSON return
|
||||
var json = JSON.parse(response);
|
||||
if (Object.keys(json).length === 0) {
|
||||
return "";
|
||||
}
|
||||
if (Array.isArray(json)) {
|
||||
for (var i = 0; i < Object.keys(json).length; i++) {
|
||||
returnResponse[returnResponse.length] = { "Value": json[i], "Label": this._Highlight(json[i]) };
|
||||
}
|
||||
}
|
||||
else {
|
||||
for (var value in json) {
|
||||
returnResponse.push({
|
||||
"Value": value,
|
||||
"Label": this._Highlight(json[value])
|
||||
});
|
||||
}
|
||||
}
|
||||
return returnResponse;
|
||||
}
|
||||
catch (event) {
|
||||
//HTML return
|
||||
return response;
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Return the autocomplete value to send (before request)
|
||||
*/
|
||||
_Pre: function () {
|
||||
return this.Input.value;
|
||||
},
|
||||
/**
|
||||
* Choice one result item
|
||||
*/
|
||||
_Select: function (item) {
|
||||
if (item.hasAttribute("data-autocomplete-value")) {
|
||||
this.Input.value = item.getAttribute("data-autocomplete-value");
|
||||
}
|
||||
else {
|
||||
this.Input.value = item.innerHTML;
|
||||
}
|
||||
this.Input.setAttribute("data-autocomplete-old-value", this.Input.value);
|
||||
},
|
||||
$AjaxTimer: null,
|
||||
$Listeners: {}
|
||||
};
|
||||
return AutoComplete;
|
||||
}());
|
||||
module.exports = AutoComplete;
|
||||
|
||||
},{}]},{},[1])(1)
|
||||
});
|
||||
14
pdb-ui/src/main/resources/resources/js/autocomplete.min.js
vendored
Normal file
14
pdb-ui/src/main/resources/resources/js/autocomplete.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@@ -1,27 +1,29 @@
|
||||
|
||||
$(document).ready(function(){
|
||||
|
||||
$('#search-submit').click(function(event){
|
||||
event.preventDefault(); // prevent submit of form which would reload the page
|
||||
|
||||
showLoadingIcon();
|
||||
var request = {};
|
||||
request['query'] = $('#search-query').val();
|
||||
request['height'] = $('#result-view').height()-10;
|
||||
request['width'] = $('#result-view').width()-10;
|
||||
|
||||
var success = function(response){
|
||||
|
||||
$('#result-view').html('<img src=\"'+response.imageUrls+'" />');
|
||||
};
|
||||
var error = function(e) {
|
||||
//var response = JSON.parse(e.responseText);
|
||||
$('#result-view').text("FAILED: " + JSON.stringify(e));
|
||||
};
|
||||
|
||||
|
||||
postJson("plots", request, success, error);
|
||||
|
||||
$('#search-submit').click(plot);
|
||||
|
||||
AutoComplete({
|
||||
HttpMethod: "GET",
|
||||
Delay: 300,
|
||||
_QueryArg: function() {
|
||||
var caretIndex = document.getElementById('search-input').selectionStart;
|
||||
return 'caretIndex=' + caretIndex + '&query';
|
||||
},
|
||||
_Post: function(response) {
|
||||
var result = [];
|
||||
var responseObject = JSON.parse(response);
|
||||
responseObject['proposals'].forEach(function(item, index){
|
||||
var proposal = {};
|
||||
proposal['Label'] = item.value;
|
||||
proposal['Value'] = item.proposedQuery;
|
||||
|
||||
result.push(proposal);
|
||||
});
|
||||
|
||||
console.log(JSON.stringify(result));
|
||||
return result;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
@@ -31,6 +33,28 @@ function showLoadingIcon()
|
||||
}
|
||||
|
||||
|
||||
function plot(event){
|
||||
event.preventDefault(); // prevent submit of form which would reload the page
|
||||
|
||||
showLoadingIcon();
|
||||
var request = {};
|
||||
request['query'] = $('#search-input').val();
|
||||
request['height'] = $('#result-view').height()-10;
|
||||
request['width'] = $('#result-view').width()-10;
|
||||
|
||||
var success = function(response){
|
||||
|
||||
$('#result-view').html('<img src=\"'+response.imageUrls+'" />');
|
||||
};
|
||||
var error = function(e) {
|
||||
$('#result-view').text("FAILED: " + JSON.stringify(e));
|
||||
};
|
||||
|
||||
|
||||
postJson("plots", request, success, error);
|
||||
|
||||
}
|
||||
|
||||
function postJson(url, requestData, successCallback, errorCallback) {
|
||||
|
||||
$.ajax({
|
||||
@@ -41,7 +65,6 @@ function postJson(url, requestData, successCallback, errorCallback) {
|
||||
})
|
||||
.done(successCallback)
|
||||
.fail(errorCallback);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user