Keypress on suggested item list

6 posts, 0 answers
  1. Hendrik
    Hendrik avatar
    11 posts
    Member since:
    Feb 2015

    Posted 02 Mar 2015 Link to this post

    I'm preventing the default behavior of the suggestion list when selecting an item with the left mouse button.
    When I use the up/down key on the keyboard to select an item in the suggestion list it always starts with the first or last item.
    I'd like to go on from the last selected item in the suggestion list.

    This was my approach:

    $("#autocomplete").kendoAutoComplete({
      dataSource: [ "Apples (red)", "Apples (yellow)", "Apples (green)", "Apples (red/yellow)" ],
      select: function(e) {
        var item = e.item;
        var text = item.text();
      }
    });
       
    var acList = $("#autocomplete").data("kendoAutoComplete");
       
    acList.bind("close", function(event) {
            if (event.sender._prev !== "" && event.sender.popup._hovered)
                event.preventDefault();
        });
     
    $(acList.list).keypress(function(event){
            console.log(event);
        })

    How can I bind the keypress event to the suggestion popup?
  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 04 Mar 2015 Link to this post

    Hello Hendrik,

    The "suggestion box" does not provide keypress event, because the AutoCompete widget actually controls the selection in the popup. You can wire the keypress event of the widget and perform the required functionality there.

    With regards to the first selected item, you can use the current method to make the last item active on popup open. Thus the user will see the last item active and will start from the end of the list. Check this demo (http://dojo.telerik.com/@ggkrustev/UXUHI) that demonstrates this approach.

    Regards,
    Georgi Krustev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Hendrik
    Hendrik avatar
    11 posts
    Member since:
    Feb 2015

    Posted 04 Mar 2015 in reply to Georgi Krustev Link to this post

    Thanks for your reply but unfortunately I can't access the Dojo from our network.

    Error message from Chrome console:
    OPTIONS https://api.everlive.com/v1/izOSS1wy0B0axfiB/Revision?_el=1425464942653 net::ERR_TUNNEL_CONNECTION_FAILED everlive.all.min.js:7
  5. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 04 Mar 2015 Link to this post

    Hi,

    Here is a copy of the Dojo demo. You can paste in a HTML page and run it:
    <!DOCTYPE html>
    <html>
    <head>
        <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
        <title>Ticket ID: 911864</title>
     
    </head>
    <body>
     
            <div id="example">
     
                <div id="shipping">
                    <label for="countries" class="info">Choose shipping countries:</label>
     
                    <input id="countries" />
     
                    <div class="hint">Start typing the name of an European country</div>
     
                </div>
     
                <script>
                    $(document).ready(function () {
                        var data = [
                                "Albania",
                                "Andorra",
                                "Armenia",
                                "Austria",
                                "Azerbaijan",
                                "Belarus",
                                "Belgium",
                                "Bosnia & Herzegovina",
                                "Bulgaria",
                                "Croatia",
                                "Cyprus",
                                "Czech Republic",
                                "Denmark",
                                "Estonia",
                                "Finland",
                                "France",
                                "Georgia",
                                "Germany",
                                "Greece",
                                "Hungary",
                                "Iceland",
                                "Ireland",
                                "Italy",
                                "Kosovo",
                                "Latvia",
                                "Liechtenstein",
                                "Lithuania",
                                "Luxembourg",
                                "Macedonia",
                                "Malta",
                                "Moldova",
                                "Monaco",
                                "Montenegro",
                                "Netherlands",
                                "Norway",
                                "Poland",
                                "Portugal",
                                "Romania",
                                "Russia",
                                "San Marino",
                                "Serbia",
                                "Slovakia",
                                "Slovenia",
                                "Spain",
                                "Sweden",
                                "Switzerland",
                                "Turkey",
                                "Ukraine",
                                "United Kingdom",
                                "Vatican City"
                            ];
     
                        //create AutoComplete UI component
                        $("#countries").kendoAutoComplete({
                            dataSource: data,
                            filter: "startswith",
                            placeholder: "Select country...",
                            separator: ", ",
                            open: function() {
                              this.current(this.ul.children().last());
                            }
                        });
                    });
                </script>
                <style scoped>
                    .info {
                        display: block;
                        line-height: 22px;
                        padding: 0 5px 5px 0;
                        color: #36558e;
                    }
     
                    #shipping {
                        width: 482px;
                        height: 152px;
                        padding: 110px 0 0 30px;
                        background: url('../content/web/autocomplete/shipping.png') transparent no-repeat 0 0;
                        margin: 100px auto;
                    }
     
                    .k-autocomplete
                    {
                        width: 250px;
                        vertical-align: middle;
                    }
     
                    .hint {
                        line-height: 22px;
                        color: #aaa;
                        font-style: italic;
                        font-size: .9em;
                        color: #7496d4;
                    }
                </style>
            </div>
    </body>
    </html>

    Regards,
    Georgi Krustev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Hendrik
    Hendrik avatar
    11 posts
    Member since:
    Feb 2015

    Posted 04 Mar 2015 in reply to Georgi Krustev Link to this post


    I hope this additional JS makes clearer what I would like to achieve:

    var ac = $("#countries").data("kendoAutoComplete");
     
    ac.bind("close", function(event) {
        event.preventDefault();
    });

    // When I run this manually in the console it works as expected. Somehow when I want to do it programatically it doesn't work:
    // var ac = $("#autocomplete").data("kendoAutoComplete")
    // ac.current(ac.ul.children().eq(3))

    ac.bind("select", function(event) {
        event.preventDefault();
        ac.current(ac.ul.children().eq(event.item.index()));
    });
  7. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 06 Mar 2015 Link to this post

    Hello Hendrik,

    Thank you for the clarification.

    In order to accomplish you goal, you will need to re-set the focus in setTimeout, because after selection widget removes the focus from the list. Here is how the code should look like:
    select: function(e) {
        var index = e.item.index();
        var widget = e.sender;
     
        setTimeout(function() {
            widget.current(widget.ul.children().eq(index));
        });
    },
    close: function(e) {
       e.preventDefault();
    }

    Regards,
    Georgi Krustev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready