Skip to content

Commit aae37cf

Browse files
baptistedonauxbaptistedonaux
committed
divise _Post and _Render methods
1 parent 6b10ea1 commit aae37cf

File tree

1 file changed

+87
-66
lines changed

1 file changed

+87
-66
lines changed

‎src/autocomplete.ts‎

Lines changed: 87 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@
1111
interface Params {
1212
// Custom params
1313
EmptyMessage: string;
14-
Headers: Object;
14+
HttpHeaders: Object;
1515
Limit: number;
16-
Method: string;
16+
HttpMethod: string;
1717
QueryArg: string;
1818
Url: string;
1919

@@ -30,11 +30,12 @@ interface Params {
3030
_EmptyMessage: any;
3131
_Focus: any;
3232
_Limit: any;
33-
_Method: any;
33+
_HttpMethod: any;
3434
_Open: any;
3535
_QueryArg: any;
3636
_Position: any;
3737
_Post: any;
38+
_Render: any;
3839
_Pre: any;
3940
_Select: any;
4041
_Url: any;
@@ -60,6 +61,11 @@ interface MappingEvent {
6061
Callback: any;
6162
Operator: ConditionOperator;
6263
}
64+
65+
interface ResponseItem {
66+
Label: string;
67+
Value: string;
68+
}
6369

6470
// Core
6571
class AutoComplete {
@@ -77,11 +83,11 @@ class AutoComplete {
7783
};
7884
static defaults: Params = {
7985
EmptyMessage: "No result here",
80-
Headers: {
86+
HttpHeaders: {
8187
"Content-type": "application/x-www-form-urlencoded"
8288
},
8389
Limit: 0,
84-
Method: "GET",
90+
HttpMethod: "GET",
8591
QueryArg: "q",
8692
Url: null,
8793

@@ -156,9 +162,8 @@ class AutoComplete {
156162

157163
AutoComplete.prototype.ajax(this, function() {
158164
if (this.Request.readyState == 4 && this.Request.status == 200) {
159-
if (!this._Post(this.Request.response)) {
160-
this._Open();
161-
}
165+
this._Render(this._Post(this.Request.response));
166+
this._Open();
162167
}
163168
}.bind(this));
164169
}
@@ -191,14 +196,14 @@ class AutoComplete {
191196

192197
return parseInt(limit);
193198
},
194-
_Method: function(): string {
195-
console.log("Method", this);
199+
_HttpMethod: function(): string {
200+
console.log("_HttpMethod", this);
196201

197202
if (this.Input.hasAttribute("data-autocomplete-method")) {
198203
return this.Input.getAttribute("data-autocomplete-method");
199204
}
200205

201-
return this.Method;
206+
return this.HttpMethod;
202207
},
203208
_QueryArg: function(): string {
204209
console.log("QueryArg", this);
@@ -232,7 +237,9 @@ class AutoComplete {
232237
},
233238
_Focus: function(): void {
234239
console.log("Focus", "Open results div", this);
240+
235241
var oldValue: string = this.Input.getAttribute("data-autocomplete-old-value");
242+
236243
console.log("Old value setted in input attribute", oldValue);
237244

238245
if (!oldValue || this.Input.value != oldValue) {
@@ -241,6 +248,7 @@ class AutoComplete {
241248
},
242249
_Open: function(): void {
243250
console.log("Open", this);
251+
244252
var params = this;
245253
Array.prototype.forEach.call(this.DOMResults.getElementsByTagName("li"), function(li) {
246254
li.onclick = function(event) {
@@ -250,68 +258,81 @@ class AutoComplete {
250258
},
251259
_Position:function(): void {
252260
console.log("Build results position", this);
261+
253262
this.DOMResults.setAttribute("class", "autocomplete");
254263
this.DOMResults.setAttribute("style", "top:" + (this.Input.offsetTop + this.Input.offsetHeight) + "px;left:" + this.Input.offsetLeft + "px;width:" + this.Input.clientWidth + "px;");
255264
},
256-
_Post: function(response: string): void {
265+
_Render: function(response: ResponseItem[]|string): void {
266+
console.log("_Render", this, "Response", response);
267+
268+
var ul: Element = document.createElement("ul"),
269+
li: Element = document.createElement("li");
270+
271+
if (typeof response == "string") {
272+
if (response.length > 0) {
273+
this.DOMResults.innerHTML = response;
274+
} else {
275+
li.setAttribute("class", "locked");
276+
ul.appendChild(li);
277+
}
278+
} else {
279+
// Order
280+
if (this._Limit() < 0) {
281+
response = response.reverse();
282+
}
283+
284+
for (var item = 0; item < response.length; item++) {
285+
li.innerHTML = response[item].Label;
286+
li.setAttribute("data-autocomplete-value", response[item].Value);
287+
288+
ul.appendChild(li);
289+
li = document.createElement("li");
290+
}
291+
}
292+
293+
if (this.DOMResults.hasChildNodes()) {
294+
this.DOMResults.childNodes[0].remove();
295+
}
296+
297+
this.DOMResults.appendChild(ul);
298+
},
299+
_Post: function(response: string): ResponseItem[]|string {
257300
console.log("Post", this);
301+
258302
try {
259-
response = JSON.parse(response);
260-
var autoReverse = function(param, limit) {
261-
return (limit < 0) ? param.reverse() : param;
262-
},
263-
addLi = function(ul, li, response) {
264-
li.innerHTML = response;
265-
ul.appendChild(li);
266-
return document.createElement("li");
267-
},
268-
empty,
269-
i = 0,
270-
length = response.length,
271-
li = document.createElement("li"),
272-
ul = document.createElement("ul"),
273-
limit = this._Limit(),
274-
propertie,
275-
properties,
276-
value;
277-
278-
if (Array.isArray(response)) {
303+
var returnResponse: ResponseItem[] = [];
304+
305+
//JSON return
306+
var json: string[]|Object = JSON.parse(response);
307+
308+
309+
if (Object.keys(json).length == 0) {
310+
return "";
311+
}
312+
313+
if (Array.isArray(json)) {
279314
console.log("Response is a JSON Array");
280-
if (length) {
281-
response = autoReverse(response, limit);
282315

283-
for (; i < length && (i < Math.abs(limit) || !limit); i++) {
284-
li = addLi(ul, li, response[i]);
285-
}
286-
} else {
287-
//If the response is an object or an array and that the response is empty, so this script is here, for the message no response.
288-
empty = true;
289-
li.setAttribute("class", "locked");
290-
li = addLi(ul, li, this._EmptyMessage());
316+
for (var i = 0 ; i < Array.prototype.length(json); i++) {
317+
returnResponse[returnResponse.length] = { "Value": json[i], "Label": json[i] };
291318
}
292319
} else {
293320
console.log("Response is a JSON Object");
294-
properties = autoReverse(Object.getOwnPropertyNames(response), limit);
295-
296-
for (propertie in properties) {
297-
value = properties[propertie];
298-
299-
if (parseInt(propertie) < Math.abs(limit) || !limit) {
300-
li.setAttribute("data-autocomplete-value", value);
301-
li = addLi(ul, li, response[value]);
302-
}
321+
322+
for (var value in json) {
323+
returnResponse.push({
324+
"Value": value,
325+
"Label": json[value]
326+
});
303327
}
304328
}
305-
306-
if (this.DOMResults.hasChildNodes()) {
307-
this.DOMResults.childNodes[0].remove();
308-
}
309-
310-
this.DOMResults.appendChild(ul);
311-
312-
return empty;
313-
} catch (e) {
314-
this.DOMResults.innerHTML = response;
329+
330+
return returnResponse;
331+
} catch (event) {
332+
//HTML return
333+
console.log("Response is a HTML", "Exception", event);
334+
335+
return response;
315336
}
316337
},
317338
_Pre: function(): string {
@@ -377,7 +398,7 @@ class AutoComplete {
377398
event(params: Params, event: KeyboardEvent): void {
378399
console.log("Event", params, "KeyboardEvent", event);
379400

380-
for (name in params.KeyboardMappings) {
401+
for (var name in params.KeyboardMappings) {
381402
var mapping: MappingEvent = AutoComplete.merge({
382403
Operator: ConditionOperator.AND
383404
}, params.KeyboardMappings[name]),
@@ -420,8 +441,8 @@ class AutoComplete {
420441
params.Request.abort();
421442
}
422443

423-
var propertyHeaders = Object.getOwnPropertyNames(params.Headers),
424-
method = params._Method(),
444+
var propertyHttpHeaders = Object.getOwnPropertyNames(params.HttpHeaders),
445+
method = params._HttpMethod(),
425446
url = params._Url(),
426447
queryParams = params.QueryArg + "=" + params._Pre();
427448

@@ -432,8 +453,8 @@ class AutoComplete {
432453
params.Request = new XMLHttpRequest();
433454
params.Request.open(method, url, true);
434455

435-
for (var i = propertyHeaders.length - 1; i >= 0; i--) {
436-
params.Request.setRequestHeader(propertyHeaders[i], params.Headers[propertyHeaders[i]]);
456+
for (var i = propertyHttpHeaders.length - 1; i >= 0; i--) {
457+
params.Request.setRequestHeader(propertyHttpHeaders[i], params.HttpHeaders[propertyHttpHeaders[i]]);
437458
}
438459

439460
params.Request.onreadystatechange = callback;

0 commit comments

Comments
 (0)