Access data from LabelInput using Google Closure

StackOverflow https://stackoverflow.com/questions/18230866

Question

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>
Was it helpful?

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top