Autocomplete selectable items

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

    Posted 17 Feb 2015 Link to this post

    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?



  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 19 Feb 2015 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Hendrik
    Hendrik avatar
    11 posts
    Member since:
    Feb 2015

    Posted 19 Feb 2015 in reply to Georgi Krustev Link to this post

    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?
  5. Answer
    Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 23 Feb 2015 Link to this post

    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!
     
  6. Hendrik
    Hendrik avatar
    11 posts
    Member since:
    Feb 2015

    Posted 23 Feb 2015 Link to this post

    Thanks, thank's what I wanted to know.
Back to Top
Kendo UI is VS 2017 Ready