How to add TextChangeListener to my add on ?

Flow
1

Hi, how can i add a TextChangeListener to my add on ?
Vaadin 7.7.9.

MyComponent.java

package com.example.searchfield;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.function.Consumer;

import com.vaadin.annotations.JavaScript;
import com.vaadin.annotations.StyleSheet;
import com.vaadin.ui.AbstractJavaScriptComponent;
import com.vaadin.ui.JavaScriptFunction;

import elemental.json.JsonArray;

@StyleSheet({"jquery.tagsinput.css", "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/start/jquery-ui.css"})
@JavaScript({"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js", "jquery.tagsinput.js",  "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js", "mylibrary.js", "mycomponent-connector.js"})
public class MyComponent extends AbstractJavaScriptComponent {
       
    // Java 8
    ArrayList<Consumer<String>> listeners =
            new ArrayList<Consumer<String>>();
    public void onChange(Consumer<String> listener) {
        listeners.add(listener);
    }
    
    public void setValue(String value) {
        getState().setValue(value);
        markAsDirty();
    }
    
    public String getValue() {
        return getState().getValue();
    }

    @Override
    public MyComponentState getState() {
        return (MyComponentState) super.getState();
    }
    
    public MyComponent() {
        addFunction("onClick", new JavaScriptFunction() {

            @Override
            public void call(JsonArray arguments) {
                getState().setValue(arguments.getString(0));
                for (Consumer<String> listener: listeners)
                    listener.accept(arguments.getString(0));
            }
        });
    }
}

MyComponentState.java

[code]
package com.example.searchfield;

import com.vaadin.shared.ui.JavaScriptComponentState;

public class MyComponentState extends JavaScriptComponentState {

private  String value;

public String getValue() {
    return value;
}

public void setValue(String value) {
    this.value = value;
}

}
[/code]mycomponent-connector.js

window.com_example_searchfield_MyComponent =
function() {
    // Create the component
    var mycomponent =
        new mylibrary.MyComponent(this.getElement());
    
   

    // Handle changes from the server-side
    this.onStateChange = function() {
        mycomponent.setValue(this.getState().value);
    };
    

    // Pass user interaction to the server-side
    var self = this;
    mycomponent.click = function() {
        self.onClick(mycomponent.getValue());
    };
    
  
};

mylibrary.js

// Define the namespace
var mylibrary = mylibrary || {};

mylibrary.MyComponent = function (element) {
        element.innerHTML =
               
                "<input type='text' id='tags_1'  class='v-textfield v-widget' name='value'/>" ;
               //class='v-textfield v-'
        // Style it
      //  element.style.border = "thin solid red";
       // element.style.display = "inline-block";
        
        // Getter and setter for the value property
        this.getValue = function () {
            alert('oi');
            return  'oi';
        };
        this.setValue = function (value) {
              $('#tags_1_tagsinput').find('span').remove()

        };

       /* // Default implementation of the click handler
        this.click = function () {
                alert("Error: Must implement click() method");
        };

        // Set up button click
        var button = element.getElementsByTagName("input")[1]
;
        var self = this; // Can't use this inside the function
        button.onclick = function () {
                alert('oi');
                self.click();
        };
        */
        var inputtext = element.getElementsByTagName("input")[0]
;
        inputtext.oninput = function(){
            alert(this.value);
        };
        $('#tags_1').tagsInput({width:'auto'});

       
        
        
       
};

Thanks for help!

2

Anyone please ?