This is a migrated thread and some comments may be shown as answers.

Keypress on suggested item list

5 Answers 797 Views
AutoComplete
This is a migrated thread and some comments may be shown as answers.
Hendrik
Top achievements
Rank 1
Hendrik asked on 02 Mar 2015, 03:12 PM
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?

5 Answers, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 04 Mar 2015, 10:21 AM
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!
 
0
Hendrik
Top achievements
Rank 1
answered on 04 Mar 2015, 10:31 AM
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
0
Georgi Krustev
Telerik team
answered on 04 Mar 2015, 11:54 AM
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!
 
0
Hendrik
Top achievements
Rank 1
answered on 04 Mar 2015, 03:30 PM

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()));
});
0
Georgi Krustev
Telerik team
answered on 06 Mar 2015, 09:52 AM
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!
 
Tags
AutoComplete
Asked by
Hendrik
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Hendrik
Top achievements
Rank 1
Share this question
or