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

[Solved] Autocomplete selectable items

4 Answers 384 Views

AutoComplete

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

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

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>

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css">

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.rtl.min.css">

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.default.min.css">

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.min.css">

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.default.min.css">

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.mobile.all.min.css">

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.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?

Accepted