CODEWITHSUNDEEP
jquerystruts2struts2-jquery
user3247571
user3247571

Reputation: 11

Struts 2 autocomplete onchange not working

I am using js autocompleter tag in my application. My problem is that when I want to use the onchange() function in the tag it doesn't work. The onchange() function is not firing. How do I solve this issue?

My JSP 

<script type="text/javascript"> 
  function change_origin_state() {
    alert("in autocompleter onchange"); 
    return true; 
  }
</script> 

<s:autocompleter list="al_state_nm" 
                 name="orgState" 
                 listValue="state_nm" 
                 listKey="state_cd" 
                 cssStyle="width:180px;height:20px" 
                 onchange="return change_origin_state();"
/>

Upvotes: 1

Views: 1639

Answers (1)

Johannes
Johannes

Reputation: 2070

Please don't use onchange attribute when using the the autocompleter tag. A better approch is to use autocompleter topics instead. They wrap the events from the jQuery Ui autocompleter events.

You can find some example, like the one bellow, how to use this topics in the Struts2 jQuery Showcase.

JavaScript Code: 

$.subscribe('autocompleteChange', function(event, data) {
    var ui = event.originalEvent.ui;
    var message = ui.item.value;
    if(ui.item.key) {
        message = '( '+ ui.item.key +' ) '+message;
    }
    $('#topics').html('<b>'+message+'</b>');
});
$.subscribe('autocompleteFocus', function(event, data) {
    var ui = event.originalEvent.ui;
    var message = ui.item.value;
    if(ui.item.key) {
        message = '( '+ ui.item.key +' ) '+message;
    }
        $('#topics').html('<u>'+message+'</u>');
});

$.subscribe('autocompleteSelect', function(event, data) {
    var ui = event.originalEvent.ui;
    var message = ui.item.value;
    if(ui.item.key) {
        message = '( '+ ui.item.key +' ) '+message;
    }
        $('#topics').html('<i>'+message+'</i>');
});

Code in JSP:

<div id="topics" class="result ui-widget-content ui-corner-all"></div>
<s:url id="jsonlanguages" action="jsonlanguages"/> 
<sj:autocompleter 
            id="languages" 
            name="echo"
            label="Handle a Array"
            href="%{jsonlanguages}" 
            delay="50" 
            loadMinimumCount="2"
            onChangeTopics="autocompleteChange"
            onFocusTopics="autocompleteFocus"
            onSelectTopics="autocompleteSelect"
/>

Upvotes: 1

Related Questions