ActiveWidgets • Example using AW.UI.Input with autocomplete box AW.UI.Grid

I needed a better autocomplete input. So I have decided to make it using the input and grid controls from AW.

I have attached a popup template to the input box, defined it a grid.The hardest part was to make the mousewheel work.

I did not want the autocomplete to actually fill the Input, but use it like a filter, so the values I get from the grid are displayed in a label object.

See the code below: 2 files (inline)

Please correct the paths to your aw js and css.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  http://www.w3.org/TR/html4/strict.dtd">

<HTML>

<HEAD>

    <script src="../../ActiveWidgets/runtime/lib/aw.js"></script>

    <link href="../../ActiveWidgets/runtime/styles/xp/aw.css" rel="stylesheet"></link>

  <style>

  #LookupI-popup .aw-mouseover-row  .aw-grid-cell

   {

    cursor:pointer;CURSOR: hand;

    background:#B8D0F0;

    border:1px solid #B8D0F0;  

   }

   #LookupI-popup .aw-column-0 .aw-item-text {font-weight:bold}

  </style>

</HEAD>

<BODY>



  <script>

  var myColumns = ["Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"];



  var pGrid = new AW.UI.Grid;

    pGrid.setHeaderText(myColumns);

    pGrid.setColumnCount(3);

    pGrid.setSelectionMode("single-row");

    pGrid.setSelectorVisible(false);

    pGrid.setStyle('height','200px');

    pGrid.setStyle('width','300px');

    //pGrid.setHeaderVisible(false);



    pGrid.onRowClicked = function(event, i){

        this.$owner.hidePopup();

        Iselected.setControlText(this.getCellText(1,i));

        Iselected.setControlValue(this.getCellText(0,i));

    }



AW.UI.LookupInput = AW.UI.Input.subclass();

AW.UI.LookupInput.create = function()

{

    AW.UI.Input.create.call(this);

    AW.Templates.Popup.create.call(this); 

   

    var obj = this.prototype;

    obj.defineTemplate("popup", new AW.UI.Grid);

  

    function mmousewheel(event){

            var top = 0;

            top -= AW.ie ? event.wheelDelta/2 : event.detail * (-10);

            var e = this.element().firstChild;

            if (e){

                top +=  e.scrollTop;

                var max =  e.scrollHeight-e.offsetHeight;

                var bars = this.getScrollProperty("bars");

                max += (bars == "horizontal" || bars == "both") ? 16 : 0;

                top = top > max ? max : top;

            }

            top = top < 0 ? 0 : top;

            this.setScrollProperty('top',top);

            AW.setReturnValue(event, false);

            

    }    

    obj.getPopupTemplate().getScrollTemplate().setEvent(AW.ie ? "onmousewheel" : "onDOMMouseScroll", mmousewheel);  

}



    

var grid_model=new AW.CSV.Table;

    pGrid.setCellModel(grid_model);



var Iobj = new AW.UI.LookupInput;

    Iobj.setId('LookupI');

    Iobj.setControlText("Input");

    Iobj.setControlImage("search");

    Iobj.setStyle('width','300px');  

    document.write(Iobj);

    Iobj.setPopupTemplate(pGrid);

    Iobj.onControlDoubleClicked = function(event) {



    var cellPopup = this.$popup;

    

        if (typeof(cellPopup) == "undefined" || cellPopup === null)

        {

            this.showPopup();

        }

        else

        {

            this.hidePopup();

        }

 

    }

    Iobj.onControlTextChanged = function(text) {

        

        var cellPopup = this.$popup;

         

        if (text.length > 0)

        {

            //grid_model.clear();

            grid_model.setURL("ajax-scripts/_lookup_demo.php?lookupfor="+text);

            grid_model.request();

            

            if (typeof(cellPopup) == "undefined" || cellPopup === null)

            {

                this.showPopup();

            }

       }

    }

    

var Iselected = new AW.UI.Label;

Iselected.setId('LookedUP');

Iselected.onControlClicked = function()

{

 alert(this.getControlValue());   

}

document.write(Iselected);

</script>



</BODY>

</HTML>

and the _lookup_demo.php

<?php

$myData = 

    array(



            array("MSFT","Microsoft Corporation", "314,571.156", "32,187.000", "55000"),

            array("ORCL", "Oracle Corporation", "62,615.266", "9,519.000", "40650"),

            array("SAP", "SAP AG (ADR)", "40,986.328", "8,296.420", "28961"),

            array("CA", "Computer Associates Inter", "15,606.335", "3,164.000", "16000"),

            array("ERTS", "Electronic Arts Inc.", "14,490.895", "2,503.727", "4000"),

            array("SFTBF", "Softbank Corp. (ADR)", "14,485.840", ".000", "6865"),

            array("VRTS", "Veritas Software Corp.", "14,444.272", "1,578.658", "5647"),

            array("SYMC", "Symantec Corporation", "9,932.483", "1,482.029", "4300"),

            array("INFY", "Infosys Technologies Ltd.", "9,763.851", "830.748", "15400"),

            array("INTU", "Intuit Inc.", "9,702.477", "1,650.743", "6700"),

            array("ADBE", "Adobe Systems Incorporate", "9,533.050", "1,230.817", "3341"),

            array("PSFT", "PeopleSoft, Inc.", "8,246.467", "1,941.167", "8180"),

            array("SEBL", "Siebel Systems, Inc.", "5,434.649", "1,417.952", "5909"),

            array("BEAS", "BEA Systems, Inc.", "5,111.813", "965.694", "3063"),

            array("SNPS", "Synopsys, Inc.", "4,482.535", "1,169.786", "4254"),

            array("CHKP", "Check Point Software Tech", "4,396.853", "424.769", "1203"),

            array("MERQ", "Mercury Interactive Corp.", "4,325.488", "444.063", "1822"),

            array("DOX", "Amdocs Limited", "4,288.017", "1,427.088", "9400"),

            array("CTXS", "Citrix Systems, Inc.", "3,946.485", "554.222", "1670"),

            array("KNM", "Konami Corporation (ADR)", "3,710.784", ".000", "4313")

        );

        

$reqparam = strtoupper($_GET['lookupfor']);

if (!$reqparam) $reqparam = 'SYS';

$result = array();

foreach($myData as $k=>$v)

{

 if (strpos(strtoupper($v[0]),$reqparam) !== false || strpos(strtoupper($v[1]),$reqparam) !== false)

 $result[] = $v;

}        

$v1 = array();

foreach($result as $k=>$v)

{

 $v1[] = '"'.implode('", "',$v).'"';

}

echo implode("\n",$v1);

?>

Hope this will help the AW community.

Bogdan

Example using AW.UI.Input with autocomplete box AW.UI.Grid

Forum search