CODEWITHSUNDEEP
angularjskendo-ui
leo
leo

Reputation: 3749

Auto-submit kendo autocomplete widget on select

I use kendo in angularjs. When I select from the autocomplete widget I want to submit the selected value in my form directly. When I write a text into the form (even if the text is not suggested by the autocomplete) enter should always submit the form.

A small example of the code, without angularjs:

<form>
    <input id="items"/>
    <button type="submit">Submit</button>
</form>

Javascript:

var names = ["Item 1","Item 2","Item 10","Item 20"];

$("#items").kendoAutoComplete({
    dataSource: names,
    ignoreCase: true
});
var autocompleteFacility = $("#items").data("kendoAutoComplete");

$("form").submit(function(event) {
    alert("Submitted item: "+$("#items").val());
    event.preventDefault();
});

http://jsfiddle.net/f8qhb57u/6/

Bonus: I want to decide if the selection was done with keys (enter) or with a mouse click.

Upvotes: 1

Views: 883

Answers (2)

leo
leo

Reputation: 3749

I found that working with the close event. On which you have a property ("_last") which is the last pressed key. So I can decide if a the selection did occur with a mouse or the enter (also if no selection was made)

autocompleteFacility.bind("close", function() {
    if(this._last === 13) {
        console.log("selection by enter");
        // autosubmit when enter used
        $("form").submit();
    } else {
        // if mouse is used, do nothing
        console.log("selection by mouse");
    }
});

Fiddle with my solution: http://jsfiddle.net/fx2eprqv/2/

Upvotes: 0

softawareblog.com
softawareblog.com

Reputation: 990

You can use change event

See Demo

..
    change: function(e) {
        $("form").submit();
  }
..

Upvotes: 2

Related Questions