Search code examples
javascripthtmlgoogle-closure-compilergoogle-closuregoogle-closure-library

Access data from LabelInput using Google Closure

I am trying to read input got through autocomplete and display it as a alert. After accessing i get undefined as alert instead of the value accessed through labelinput.

The ex.js file is as follows

goog.require('goog.dom');
goog.require('goog.ui.LabelInput');
goog.require('goog.ui.ac');
goog.require('goog.events.EventType');
function autoComplete() {
    var jobj = [{"cityname":"Bangalore","cityid":"1"},
    {"cityname":"Bellary","cityid":"2"},
    {"cityname":"Belgaum","cityid":"3"},
    {"cityname":"Bidar","cityid":"4"},
    {"cityname":"Mumbai","cityid":"5"},
    {"cityname":"Munnar","cityid":"6"},
    {"cityname":"Delhi","cityid":"7"},
    {"cityname":"Diu/Daman","cityid":"8"}];
    var li1 = new goog.ui.LabelInput("Enter City Name");
        li1.render(goog.dom.getElement('d1'));
    var array1 = new Array();
        for (var i=0;i<jobj.length; i++)
        {
        array1[i] = jobj[i].cityname;
        }
    var ac2 = goog.ui.ac.createSimpleAutoComplete(
        array1, goog.dom.getElement('d1'), false);
    goog.events.listen(ac2,
        goog.ui.ac.AutoComplete.EventType.UPDATE,
        function() { var val2 = (goog.dom.getElement('d1').value);
        alert(val2);
        });
}

The ex.html file is as follows

<html>
  <head>
    <script src="../closure-library/closure/goog/base.js"></script> <!--My Closure Library Location -->
    <script src="ex.js"></script>
  </head>
  <body onload="autoComplete();">
    <style>
        .ac-renderer {
        position: absolute;
        width: 300px;
        background-color: #fff;
        border: 1px solid;
        }
    </style>
        <div id="d1">City &nbsp </div><br><br>
    </body>
</html>
Solution

  • "goog.dom.getElement('d1')" will return a div element, which will not have a value. The LabelInput renders a control inside of that element when you call 

    li1.render(goog.dom.getElement('d1'));

    You should be using the getValue method of the LabelInput class itself 

    li1.getValue()

    or if you want to access the Input element created during the LabelInput render method, call

    li1.getElement().value

    Source : http://docs.closure-library.googlecode.com/git/class_goog_ui_LabelInput.html