a65f82b04bacc1d4c2439e5f860e475a34146e4e
2 * OpenSearch ajax suggestion engine for MediaWiki
4 * uses core MediaWiki open search support to fetch suggestions
5 * and show them below search boxes and other inputs
7 * by Robert Stojnic (April 2008)
10 // search_box_id -> Results object
12 // cached data, url -> json_text
14 // global variables for suggest_keypress
15 var os_cur_keypressed
= 0;
16 var os_last_keypress
= 0;
17 var os_keypressed_count
= 0;
20 // tie mousedown/up events
21 var os_mouse_pressed
= false;
22 var os_mouse_num
= -1;
23 // if true, the last change was made by mouse (and not keyboard)
24 var os_mouse_moved
= false;
25 // delay between keypress and suggestion (in ms)
26 var os_search_timeout
= 250;
27 // these pairs of inputs/forms will be autoloaded at startup
28 var os_autoload_inputs
= new Array('searchInput', 'searchInput2', 'powerSearchText', 'searchText');
29 var os_autoload_forms
= new Array('searchform', 'searchform2', 'powersearch', 'search' );
30 // if we stopped the service
31 var os_is_stopped
= false;
32 // max lines to show in suggest table
33 var os_max_lines_per_suggest
= 7;
34 // if we are about to focus the searchbox for the first time
35 var os_first_focus
= true;
37 /** Timeout timer class that will fetch the results */
38 function os_Timer(id
,r
,query
){
44 /** Property class for single search box */
45 function os_Results(name
, formname
){
46 this.searchform
= formname
; // id of the searchform
47 this.searchbox
= name
; // id of the searchbox
48 this.container
= name
+"Suggest"; // div that holds results
49 this.resultTable
= name
+"Result"; // id base for the result table (+num = table row)
50 this.resultText
= name
+"ResultText"; // id base for the spans within result tables (+num)
51 this.toggle
= name
+"Toggle"; // div that has the toggle (enable/disable) link
52 this.query
= null; // last processed query
53 this.results
= null; // parsed titles
54 this.resultCount
= 0; // number of results
55 this.original
= null; // query that user entered
56 this.selected
= -1; // which result is selected
57 this.containerCount
= 0; // number of results visible in container
58 this.containerRow
= 0; // height of result field in the container
59 this.containerTotal
= 0; // total height of the container will all results
60 this.visible
= false; // if container is visible
63 /** Hide results div */
64 function os_hideResults(r
){
65 var c
= document
.getElementById(r
.container
);
67 c
.style
.visibility
= "hidden";
72 /** Show results div */
73 function os_showResults(r
){
77 var c
= document
.getElementById(r
.container
);
81 c
.style
.visibility
= "visible";
86 function os_operaWidthFix(x
){
87 // TODO: better css2 incompatibility detection here
88 if(is_opera
|| is_khtml
|| navigator
.userAgent
.toLowerCase().indexOf('firefox/1')!=-1){
89 return x
- 30; // opera&konqueror & old firefox don't understand overflow-x, estimate scrollbar width
94 function os_encodeQuery(value
){
95 if (encodeURIComponent
) {
96 return encodeURIComponent(value
);
102 function os_decodeValue(value
){
103 if (decodeURIComponent
) {
104 return decodeURIComponent(value
);
107 return unescape(value
);
111 /** Brower-dependent functions to find window inner size, and scroll status */
112 function f_clientWidth() {
113 return f_filterResults (
114 window
.innerWidth
? window
.innerWidth
: 0,
115 document
.documentElement
? document
.documentElement
.clientWidth
: 0,
116 document
.body
? document
.body
.clientWidth
: 0
119 function f_clientHeight() {
120 return f_filterResults (
121 window
.innerHeight
? window
.innerHeight
: 0,
122 document
.documentElement
? document
.documentElement
.clientHeight
: 0,
123 document
.body
? document
.body
.clientHeight
: 0
126 function f_scrollLeft() {
127 return f_filterResults (
128 window
.pageXOffset
? window
.pageXOffset
: 0,
129 document
.documentElement
? document
.documentElement
.scrollLeft
: 0,
130 document
.body
? document
.body
.scrollLeft
: 0
133 function f_scrollTop() {
134 return f_filterResults (
135 window
.pageYOffset
? window
.pageYOffset
: 0,
136 document
.documentElement
? document
.documentElement
.scrollTop
: 0,
137 document
.body
? document
.body
.scrollTop
: 0
140 function f_filterResults(n_win
, n_docel
, n_body
) {
141 var n_result
= n_win
? n_win
: 0;
142 if (n_docel
&& (!n_result
|| (n_result
> n_docel
)))
144 return n_body
&& (!n_result
|| (n_result
> n_body
)) ? n_body
: n_result
;
147 /** Get the height available for the results container */
148 function os_availableHeight(r
){
149 var absTop
= document
.getElementById(r
.container
).style
.top
;
150 var px
= absTop
.lastIndexOf("px");
152 absTop
= absTop
.substring(0,px
);
153 return f_clientHeight() - (absTop
- f_scrollTop());
157 /** Get element absolute position {left,top} */
158 function os_getElementPosition(elemID
){
159 var offsetTrail
= document
.getElementById(elemID
);
163 offsetLeft
+= offsetTrail
.offsetLeft
;
164 offsetTop
+= offsetTrail
.offsetTop
;
165 offsetTrail
= offsetTrail
.offsetParent
;
167 if (navigator
.userAgent
.indexOf('Mac') != -1 && typeof document
.body
.leftMargin
!= 'undefined'){
168 offsetLeft
+= document
.body
.leftMargin
;
169 offsetTop
+= document
.body
.topMargin
;
171 return {left
:offsetLeft
,top
:offsetTop
};
174 /** Create the container div that will hold the suggested titles */
175 function os_createContainer(r
){
176 var c
= document
.createElement("div");
177 var s
= document
.getElementById(r
.searchbox
);
178 var pos
= os_getElementPosition(r
.searchbox
);
180 var top
= pos
.top
+ s
.offsetHeight
;
181 c
.className
= "os-suggest";
182 c
.setAttribute("id", r
.container
);
183 document
.body
.appendChild(c
);
185 // dynamically generated style params
186 // IE workaround, cannot explicitely set "style" attribute
187 c
= document
.getElementById(r
.container
);
188 c
.style
.top
= top
+"px";
189 c
.style
.left
= left
+"px";
190 c
.style
.width
= s
.offsetWidth
+"px";
192 // mouse event handlers
193 c
.onmouseover = function(event
) { os_eventMouseover(r
.searchbox
, event
); };
194 c
.onmousemove = function(event
) { os_eventMousemove(r
.searchbox
, event
); };
195 c
.onmousedown = function(event
) { return os_eventMousedown(r
.searchbox
, event
); };
196 c
.onmouseup = function(event
) { os_eventMouseup(r
.searchbox
, event
); };
200 /** change container height to fit to screen */
201 function os_fitContainer(r
){
202 var c
= document
.getElementById(r
.container
);
203 var h
= os_availableHeight(r
) - 20;
204 var inc
= r
.containerRow
;
205 h
= parseInt(h
/inc
) * inc
;
206 if(h
< (2 * inc
) && r
.resultCount
> 1) // min: two results
208 if((h
/inc
) > os_max_lines_per_suggest
)
209 h
= inc
* os_max_lines_per_suggest
;
210 if(h
< r
.containerTotal
){
211 c
.style
.height
= h
+"px";
212 r
.containerCount
= parseInt(Math
.round(h
/inc
));
214 c
.style
.height
= r
.containerTotal
+"px";
215 r
.containerCount
= r
.resultCount
;
218 /** If some entries are longer than the box, replace text with "..." */
219 function os_trimResultText(r
){
220 var w
= document
.getElementById(r
.container
).offsetWidth
;
221 if(r
.containerCount
< r
.resultCount
){
222 w
-= 20; // give 20px for scrollbar
224 w
= os_operaWidthFix(w
);
227 for(var i
=0;i
<r
.resultCount
;i
++){
228 var e
= document
.getElementById(r
.resultText
+i
);
230 var lastW
= e
.offsetWidth
+1;
232 var changedText
= false;
233 while(e
.offsetWidth
> w
&& (e
.offsetWidth
< lastW
|| iteration
<2)){
235 lastW
= e
.offsetWidth
;
237 e
.innerHTML
= l
.substring(0,l
.length
-replace
)+"...";
239 replace
= 4; // how many chars to replace
242 // show hint for trimmed titles
243 document
.getElementById(r
.resultTable
+i
).setAttribute("title",r
.results
[i
]);
248 /** Handles data from XMLHttpRequest, and updates the suggest results */
249 function os_updateResults(r
, query
, text
, cacheKey
){
250 os_cache
[cacheKey
] = text
;
259 var p
= eval('('+text
+')'); // simple json parse, could do a safer one
260 if(p
.length
<2 || p
[1].length
== 0){
266 var c
= document
.getElementById(r
.container
);
268 c
= os_createContainer(r
);
269 c
.innerHTML
= os_createResultTable(r
,p
[1]);
270 // init container table sizes
271 var t
= document
.getElementById(r
.resultTable
);
272 r
.containerTotal
= t
.offsetHeight
;
273 r
.containerRow
= t
.offsetHeight
/ r
.resultCount
;
274 os_trimResultText(r
);
277 // bad response from server or such
279 os_cache
[cacheKey
] = null;
284 /** Create the result table to be placed in the container div */
285 function os_createResultTable(r
, results
){
286 var c
= document
.getElementById(r
.container
);
287 var width
= os_operaWidthFix(c
.offsetWidth
);
288 var html
= "<table class=\"os-suggest-results\" id=\""+r
.resultTable
+"\" style=\"width: "+width
+"px;\">";
289 r
.results
= new Array();
290 r
.resultCount
= results
.length
;
291 for(i
=0;i
<results
.length
;i
++){
292 var title
= os_decodeValue(results
[i
]);
293 r
.results
[i
] = title
;
294 html
+= "<tr><td class=\"os-suggest-result\" id=\""+r
.resultTable
+i
+"\"><span id=\""+r
.resultText
+i
+"\">"+title
+"</span></td></tr>";
300 /** Fetch namespaces from checkboxes or hidden fields in the search form,
301 if none defined use wgSearchNamespaces global */
302 function os_getNamespaces(r
){
304 var elements
= document
.forms
[r
.searchform
].elements
;
305 for(i
=0; i
< elements
.length
; i
++){
306 var name
= elements
[i
].name
;
307 if(typeof name
!= 'undefined' && name
.length
> 2
308 && name
[0]=='n' && name
[1]=='s'
309 && ((elements
[i
].type
=='checkbox' && elements
[i
].checked
)
310 || (elements
[i
].type
=='hidden' && elements
[i
].value
=="1")) ){
313 namespaces
+=name
.substring(2);
317 namespaces
= wgSearchNamespaces
.join("|");
321 /** Update results if user hasn't already typed something else */
322 function os_updateIfRelevant(r
, query
, text
, cacheKey
){
323 var t
= document
.getElementById(r
.searchbox
);
324 if(t
!= null && t
.value
== query
){ // check if response is still relevant
325 os_updateResults(r
, query
, text
, cacheKey
);
330 /** Fetch results after some timeout */
331 function os_delayedFetch(){
335 var query
= os_timer
.query
;
337 var path
= wgMWSuggestTemplate
.replace("{namespaces}",os_getNamespaces(r
))
338 .replace("{dbname}",wgDBname
)
339 .replace("{searchTerms}",os_encodeQuery(query
));
341 // try to get from cache, if not fetch using ajax
342 var cached
= os_cache
[path
];
344 os_updateIfRelevant(r
, query
, cached
, path
);
346 var xmlhttp
= sajax_init_object();
349 xmlhttp
.open("GET", path
, true);
350 xmlhttp
.onreadystatechange=function(){
351 if (xmlhttp
.readyState
==4 && typeof os_updateIfRelevant
== 'function') {
352 os_updateIfRelevant(r
, query
, xmlhttp
.responseText
, path
);
357 if (window
.location
.hostname
== "localhost") {
358 alert("Your browser blocks XMLHttpRequest to 'localhost', try using a real hostname for development/testing.");
366 /** Init timed update via os_delayedUpdate() */
367 function os_fetchResults(r
, query
, timeout
){
371 } else if(query
== r
.query
)
374 os_is_stopped
= false; // make sure we're running
376 /* var cacheKey = wgDBname+":"+query;
377 var cached = os_cache[cacheKey];
379 os_updateResults(r,wgDBname,query,cached);
383 // cancel any pending fetches
384 if(os_timer
!= null && os_timer
.id
!= null)
385 clearTimeout(os_timer
.id
);
386 // schedule delayed fetching of results
388 os_timer
= new os_Timer(setTimeout("os_delayedFetch()",timeout
),r
,query
);
390 os_timer
= new os_Timer(null,r
,query
);
391 os_delayedFetch(); // do it now!
395 /** Change the highlighted row (i.e. suggestion), from position cur to next */
396 function os_changeHighlight(r
, cur
, next
, updateSearchBox
){
397 if (next
>= r
.resultCount
)
398 next
= r
.resultCount
-1;
403 return; // nothing to do.
406 var curRow
= document
.getElementById(r
.resultTable
+ cur
);
408 curRow
.className
= "os-suggest-result";
412 var nextRow
= document
.getElementById(r
.resultTable
+ next
);
414 nextRow
.className
= "os-suggest-result-hl";
415 newText
= r
.results
[next
];
417 newText
= r
.original
;
419 // adjust the scrollbar if any
420 if(r
.containerCount
< r
.resultCount
){
421 var c
= document
.getElementById(r
.container
);
422 var vStart
= c
.scrollTop
/ r
.containerRow
;
423 var vEnd
= vStart
+ r
.containerCount
;
425 c
.scrollTop
= next
* r
.containerRow
;
426 else if(next
>= vEnd
)
427 c
.scrollTop
= (next
- r
.containerCount
+ 1) * r
.containerRow
;
430 // update the contents of the search box
432 os_updateSearchQuery(r
,newText
);
436 function os_updateSearchQuery(r
,newText
){
437 document
.getElementById(r
.searchbox
).value
= newText
;
441 /** Find event target */
442 function os_getTarget(e
){
443 if (!e
) var e
= window
.event
;
444 if (e
.target
) return e
.target
;
445 else if (e
.srcElement
) return e
.srcElement
;
451 /********************
453 ********************/
455 /** Event handler that will fetch results on keyup */
456 function os_eventKeyup(e
){
457 var targ
= os_getTarget(e
);
458 var r
= os_map
[targ
.id
];
460 return; // not our event
462 // some browsers won't generate keypressed for arrow keys, catch it
463 if(os_keypressed_count
== 0){
464 os_processKey(r
,os_cur_keypressed
,targ
);
466 var query
= targ
.value
;
467 os_fetchResults(r
,query
,os_search_timeout
);
470 /** catch arrows up/down and escape to hide the suggestions */
471 function os_processKey(r,keypressed,targ){
472 if (keypressed == 40){ // Arrow Down
474 os_changeHighlight(r, r.selected, r.selected+1, true);
475 } else if(os_timer == null){
476 // user wants to get suggestions now
478 os_fetchResults(r,targ.value,0);
480 } else if (keypressed == 38){ // Arrow Up
482 os_changeHighlight(r, r.selected, r.selected-1, true);
484 } else if(keypressed == 27){ // Escape
485 document.getElementById(r.searchbox).value = r.original;
486 r.query = r.original;
488 } else if(r.query != document.getElementById(r.searchbox).value){
489 // os_hideResults(r); // don't show old suggestions
493 /** When keys is held down use a timer to output regular events */
494 function os_eventKeypress(e
){
495 var targ
= os_getTarget(e
);
496 var r
= os_map
[targ
.id
];
498 return; // not our event
500 var keypressed
= os_cur_keypressed
;
501 if(keypressed
== 38 || keypressed
== 40){
503 var now
= d
.getTime();
504 if(now
- os_last_keypress
< 120){
505 os_last_keypress
= now
;
510 os_keypressed_count
++;
511 os_processKey(r
,keypressed
,targ
);
514 /** Catch the key code (Firefox bug) */
515 function os_eventKeydown(e
){
516 if (!e
) var e
= window
.event
;
517 var targ
= os_getTarget(e
);
518 var r
= os_map
[targ
.id
];
520 return; // not our event
522 os_mouse_moved
= false;
525 // firefox bug, focus&defocus to make autocomplete=off valid
526 targ
.blur(); targ
.focus();
527 os_first_focus
= false;
530 os_cur_keypressed
= (window
.Event
) ? e
.which
: e
.keyCode
;
531 os_last_keypress
= 0;
532 os_keypressed_count
= 0;
535 /** Event: loss of focus of input box */
536 function os_eventBlur(e
){
538 return; // we are focusing/defocusing
539 var targ
= os_getTarget(e
);
540 var r
= os_map
[targ
.id
];
542 return; // not our event
543 if(!os_mouse_pressed
)
547 /** Event: focus (catch only when stopped) */
548 function os_eventFocus(e
){
550 return; // we are focusing/defocusing
555 /********************
557 ********************/
559 /** Mouse over the container */
560 function os_eventMouseover(srcId
, e
){
561 var targ
= os_getTarget(e
);
562 var r
= os_map
[srcId
];
563 if(r
== null || !os_mouse_moved
)
564 return; // not our event
565 var num
= os_getNumberSuffix(targ
.id
);
567 os_changeHighlight(r
,r
.selected
,num
,false);
571 /* Get row where the event occured (from its id) */
572 function os_getNumberSuffix(id
){
573 var num
= id
.substring(id
.length
-2);
574 if( ! (num
.charAt(0) >= '0' && num
.charAt(0) <= '9') )
575 num
= num
.substring(1);
577 return parseInt(num
);
582 /** Save mouse move as last action */
583 function os_eventMousemove(srcId
, e
){
584 os_mouse_moved
= true;
587 /** Mouse button held down, register possible click */
588 function os_eventMousedown(srcId
, e
){
589 var targ
= os_getTarget(e
);
590 var r
= os_map
[srcId
];
592 return; // not our event
593 var num
= os_getNumberSuffix(targ
.id
);
595 os_mouse_pressed
= true;
598 // os_updateSearchQuery(r,r.results[num]);
600 // keep the focus on the search field
601 document
.getElementById(r
.searchbox
).focus();
603 return false; // prevents selection
606 /** Mouse button released, check for click on some row */
607 function os_eventMouseup(srcId
, e
){
608 var targ
= os_getTarget(e
);
609 var r
= os_map
[srcId
];
611 return; // not our event
612 var num
= os_getNumberSuffix(targ
.id
);
614 if(num
>= 0 && os_mouse_num
== num
){
615 os_updateSearchQuery(r
,r
.results
[num
]);
617 document
.getElementById(r
.searchform
).submit();
619 os_mouse_pressed
= false;
620 // keep the focus on the search field
621 document
.getElementById(r
.searchbox
).focus();
624 /** Check if x is a valid integer */
625 function os_isNumber(x
){
626 if(x
== "" || isNaN(x
))
628 for(var i
=0;i
<x
.length
;i
++){
630 if( ! (c
>= '0' && c
<= '9') )
637 /** When the form is submitted hide everything, cancel updates... */
638 function os_eventOnsubmit(e
){
639 var targ
= os_getTarget(e
);
641 os_is_stopped
= true;
642 // kill timed requests
643 if(os_timer
!= null && os_timer
.id
!= null){
644 clearTimeout(os_timer
.id
);
647 // Hide all suggestions
648 for(i
=0;i
<os_autoload_inputs
.length
;i
++){
649 var r
= os_map
[os_autoload_inputs
[i
]];
651 var b
= document
.getElementById(r
.searchform
);
652 if(b
!= null && b
== targ
){
653 // set query value so the handler won't try to fetch additional results
654 r
.query
= document
.getElementById(r
.searchbox
).value
;
662 function os_hookEvent(element
, hookName
, hookFunct
) {
663 if (element
.addEventListener
) {
664 element
.addEventListener(hookName
, hookFunct
, false);
665 } else if (window
.attachEvent
) {
666 element
.attachEvent("on" + hookName
, hookFunct
);
670 /** Init Result objects and event handlers */
671 function os_initHandlers(name
, formname
, element
){
672 var r
= new os_Results(name
, formname
);
674 os_hookEvent(element
, "keyup", function(event
) { os_eventKeyup(event
); });
675 os_hookEvent(element
, "keydown", function(event
) { os_eventKeydown(event
); });
676 os_hookEvent(element
, "keypress", function(event
) { os_eventKeypress(event
); });
677 os_hookEvent(element
, "blur", function(event
) { os_eventBlur(event
); });
678 os_hookEvent(element
, "focus", function(event
) { os_eventFocus(event
); });
679 element
.setAttribute("autocomplete","off");
681 os_hookEvent(document
.getElementById(formname
), "onsubmit", function(event
){ return os_eventOnsubmit(event
); });
684 if(document
.getElementById(r
.toggle
) == null){
685 // TODO: disable this while we figure out a way for this to work in all browsers
686 /* if(name=='searchInput'){
687 // special case: place above the main search box
688 var t = os_createToggle(r,"os-suggest-toggle");
689 var searchBody = document.getElementById('searchBody');
690 var first = searchBody.parentNode.firstChild.nextSibling.appendChild(t);
692 // default: place below search box to the right
693 var t = os_createToggle(r,"os-suggest-toggle-def");
694 var top = element.offsetTop + element.offsetHeight;
695 var left = element.offsetLeft + element.offsetWidth;
696 t.style.position = "absolute";
697 t.style.top = top + "px";
698 t.style.left = left + "px";
699 element.parentNode.appendChild(t);
700 // only now width gets calculated, shift right
701 left -= t.offsetWidth;
702 t.style.left = left + "px";
703 t.style.visibility = "visible";
709 /** Return the span element that contains the toggle link */
710 function os_createToggle(r
,className
){
711 var t
= document
.createElement("span");
712 t
.className
= className
;
713 t
.setAttribute("id", r
.toggle
);
714 var link
= document
.createElement("a");
715 link
.setAttribute("href","javascript:void(0);");
716 link
.onclick = function(){ os_toggle(r
.searchbox
,r
.searchform
) };
717 var msg
= document
.createTextNode(wgMWSuggestMessages
[0]);
718 link
.appendChild(msg
);
723 /** Call when user clicks on some of the toggle links */
724 function os_toggle(inputId
,formName
){
728 os_enableSuggestionsOn(inputId
,formName
);
730 msg
= wgMWSuggestMessages
[0];
732 os_disableSuggestionsOn(inputId
,formName
);
733 msg
= wgMWSuggestMessages
[1];
736 var link
= document
.getElementById(r
.toggle
).firstChild
;
737 link
.replaceChild(document
.createTextNode(msg
),link
.firstChild
);
740 /** Call this to enable suggestions on input (id=inputId), on a form (name=formName) */
741 function os_enableSuggestionsOn(inputId
, formName
){
742 os_initHandlers( inputId
, formName
, document
.getElementById(inputId
) );
745 /** Call this to disable suggestios on input box (id=inputId) */
746 function os_disableSuggestionsOn(inputId
){
749 // cancel/hide results
752 // turn autocomplete on !
753 document
.getElementById(inputId
).setAttribute("autocomplete","on");
755 os_map
[inputId
] = null;
759 /** Initialization, call upon page onload */
760 function os_MWSuggestInit() {
761 for(i
=0;i
<os_autoload_inputs
.length
;i
++){
762 var id
= os_autoload_inputs
[i
];
763 var form
= os_autoload_forms
[i
];
764 element
= document
.getElementById( id
);
766 os_initHandlers(id
,form
,element
);
770 hookEvent("load", os_MWSuggestInit
);