wicket.extensions.ajax.markup.html.autocomplete.wicket-autocomplete.js Maven / Gradle / Ivy

Go to download
/*
 * Wicket Ajax Autocomplete
 * Licensed under the Apache License, Version 2.0
 * @author Janne Hietamäki
 */

if (typeof(Wicket) == "undefined")
	Wicket = { };
	  
Wicket.AutoComplete=function(elementId,callbackUrl){
    var KEY_BACKSPACE=8;
    var KEY_TAB=9;
    var KEY_ENTER=13;
    var KEY_ESC=27;
    var KEY_LEFT=37;
    var KEY_UP=38;
    var KEY_RIGHT=39;
    var KEY_DOWN=40;
    var KEY_SHIFT=16;
    var KEY_CTRL=17;
    var KEY_ALT=18;    
    
    var selected=-1;
    var elementCount=0;
    var visible=0;
    var mouseactive=0;
    
    function initialize(){
        var obj=wicketGet(elementId);

        obj.onblur=function(event){
    		if(mouseactive==1)return false;
          	hideAutoComplete();
        }
       
        obj.onkeydown=function(event){
            switch(wicketKeyCode(getEvent(event))){
                case KEY_UP:
        	        if(selected>-1)selected--;
            	    if(selected==-1){
    	           	    hideAutoComplete();
                   	} else {
	                    render();
        	        }
            	    if(navigator.appVersion.indexOf('AppleWebKit')>0)return killEvent(event);
                	break;
                case KEY_DOWN:
               		if(selected0)return killEvent(event);
        	        break;
                case KEY_ESC:
            	    hideAutoComplete();
                	return killEvent(event);
               		break;
                case KEY_ENTER:
	                if(selected>-1){
    	                obj.value=getSelectedValue();
        	            hideAutoComplete();
	                	return killEvent(event);
            	    }
            	    return true;
                break;
                default:
            }
        }
                
        obj.onkeyup=function(event){
            switch(wicketKeyCode(getEvent(event))){
                case KEY_ENTER:
	                return killEvent(event);
                case KEY_UP:
                case KEY_DOWN:
                case KEY_ESC:
                case KEY_TAB:
                case KEY_RIGHT:
                case KEY_LEFT:
                case KEY_SHIFT:
                case KEY_ALT:
                case KEY_CTRL:
                break;
                default:
    	            updateChoices();
            }
            return null;
        }
                
        obj.onkeypress=function(event){
            if(wicketKeyCode(getEvent(event))==KEY_ENTER){
                return killEvent(event);
            }
        }
    }
    
    function getMenuId() {
        return elementId+"-autocomplete";
    }
    
    function getAutocompleteMenu() {
        var choiceDiv = document.getElementById(getMenuId());
        if (choiceDiv == null) {
            choiceDiv = document.createElement("div");
            document.body.appendChild(choiceDiv);
            choiceDiv.id = getMenuId();
            choiceDiv.className = "wicket-aa";
            choiceDiv.style.display = "none";
            choiceDiv.style.position = "absolute";
            choiceDiv.style.zIndex = "10000";
        }
        
        choiceDiv.show = function() { wicketShow(this.id) }
        choiceDiv.hide = function() { wicketHide(this.id) }
        
        return choiceDiv;
    }
    
    function getEvent(event){
        if(!event)return window.event;
        return event;
    }
    
    function killEvent(event){
        if(!event)event=window.event;
        if(!event)return false;
        if(event.cancelBubble!=null){
            event.cancelBubble=true;
        }
        if(event.returnValue){
            event.returnValue=false;
        }
        if(event.stopPropagation){
            event.stopPropagation();
        }
        if(event.preventDefault){
            event.preventDefault();
        }
        return false;
    }
    
    function updateChoices(){
        selected=-1;

        var value = wicketGet(elementId).value;
       	var request = new Wicket.Ajax.Request(callbackUrl+"&q="+processValue(value), doUpdateChoices, false, true, false, "wicket-autocomplete|d");
       	request.get();       	
    }

    function processValue(param) {
        var browserName = navigator.appName;
        if (browserName != "Microsoft Internet Explorer"){
            return param;
        }
        return encodeURIComponent(param);
    }
    
    function showAutoComplete(){
        var position=getPosition(wicketGet(elementId));
        var menu = getAutocompleteMenu();
        var input=wicketGet(elementId);
        menu.show();
        menu.style.left=position[0]+'px'
        menu.style.top=(input.offsetHeight+position[1])+'px';
        menu.style.width=input.offsetWidth+'px';
        visible=1;
        hideShowCovered();
    }
    
    function hideAutoComplete(){
        visible=0;
        selected=-1;
        getAutocompleteMenu().hide();
        hideShowCovered();
    }
    
    function getPosition(obj) {
        var leftPosition=0;
        var topPosition=0;
        do {
            topPosition += obj.offsetTop  || 0;
            leftPosition += obj.offsetLeft || 0;
            obj = obj.offsetParent;
        } while (obj);
        return [leftPosition,topPosition];
    }
    
    function doUpdateChoices(resp){
        var element = getAutocompleteMenu();
        element.innerHTML=resp;
        if(element.firstChild && element.firstChild.childNodes) {
            elementCount=element.firstChild.childNodes.length;
        
            for(var i=0;i0){
            showAutoComplete();
        } else {
            hideAutoComplete();
        }
        render();
    }
    
    function getSelectedValue(){
        var element = getAutocompleteMenu();
        var attr=element.firstChild.childNodes[selected].attributes['textvalue'];
        var value;
        if (attr==undefined) {
            value = element.firstChild.childNodes[selected].innerHTML;
            } else {
            value = attr.value;
        }
        return stripHTML(value);
    }

    function getElementIndex(element) {
		for(var i=0;i]+>/g,"");
    }
    
    function render(){
        var element= getAutocompleteMenu();
        for(var i=0;iacRightX) || (rightXacBottomY) || (bottomY