Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

Autocomplete selectable items

4 Answers 246 Views
AutoComplete
This is a migrated thread and some comments may be shown as answers.
Hendrik
Top achievements
Rank 1
Hendrik asked on 17 Feb 2015, 11:05 AM
Hi there,
I want to make items selectable on mouse-click which are shown in the Autocomplete widget result list.

I saw that there is an unselectable attribute which is set to no.
Is there any Kendo-way to do it or do I have to implement my own functionality with jQuery?

<ul unselectable="on" class="k-list k-reset" tabindex="-1" role="listbox" aria-hidden="false" id="autocomplete_listbox" aria-live="polite" style="overflow: auto; height: auto;">
  <li tabindex="-1" role="option" unselectable="on" class="k-item">A1</li>
  <li tabindex="-1" role="option" unselectable="on" class="k-item">A2</li>
  <li tabindex="-1" role="option" unselectable="on" class="k-item">A3</li>
  <li tabindex="-1" role="option" unselectable="on" class="k-item">A4</li>
  <li tabindex="-1" role="option" unselectable="on" class="k-item">A5</li>
  <li tabindex="-1" role="option" unselectable="on" class="k-item">A6</li>
</ul>

What would be the best approach here?



4 Answers, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 19 Feb 2015, 08:17 AM
Hello Hendrik,

The AutoComplete widget renders the LI elements with unselectable="on" attribute, because of IE browsers in order to prevent item focusing. If you would like to remove this attribute, then you can done this in the dataBound event of the widget:
function dataBound(e) {
  var widget = e.sender;
 
  widget.ul.find("li").removeAttr("unselectable");
}

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 19 Feb 2015, 08:54 AM
Hi Georgi,
My question was related to any browser.

Furthermore I also have to change the close event behavior.
I prepared a quick example to show my current appraoch (unfortunately kendo dojo doesn't work currently):

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Kendo UI Snippet</title>
 
 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
   
<input id="autocomplete" />
<script>
function autocomplete_close(e) {
  if (e.sender._prev !== "")
            e.preventDefault();
}
function autocomplete_select(e) {
    if(this.hasOwnProperty("currentSelected"))
            $(this["currentSelected"]).removeClass("k-state-selected");
         
        $(e.item[0]).addClass("k-state-selected");
        selected = true;
        this.currentSelected = e.item[0];
}
   
$("#autocomplete").kendoAutoComplete({
  dataSource: [ "Apples", "Oranges" ]
});
var autocomplete = $("#autocomplete").data("kendoAutoComplete");
autocomplete.bind("close", autocomplete_close);
autocomplete.bind("select", autocomplete_select);
</script>
</body>
</html>

I also want to close the list of the autocomplete widget when a click outside of the list happens.
How could I achieve this?
0
Accepted
Georgi Krustev
Telerik team
answered on 23 Feb 2015, 07:13 AM
Hello Hendrik,

The provided solution is applicable to any browser.

With regards to the second question, the general approach is to wire the document.body click/mousedown events and close the popup element. Here is how the popup widget, used inside the AutoComplete, does this.

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 23 Feb 2015, 03:30 PM
Thanks, thank's what I wanted to know.
Tags
AutoComplete
Asked by
Hendrik
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Hendrik
Top achievements
Rank 1
Share this question
or