Unplanned
Last Updated: 25 Feb 2020 12:56 by ADMIN
Doug
Created on: 02 Dec 2019 22:16
Category: AutoComplete
Type: Feature Request
1
enforceMinLength no closing the dropdown window when deleting characters get below minimum length

If I have a min length of 3 and enforceMinLength set to true, if you enter in 3 or more characters and then start deleting them (keyboard) once you get below the min length the dropdown remains open when it should close.

 

See the dojo option under the enforceMinLength API documentation for a sample to test.

 

 

 
5 comments
ADMIN
Misho
Posted on: 09 Dec 2019 14:51

Hi,

Thank you for your feedback for the Autocomplete widget. 

Regarding the autocomplete popup not closing when deleting characters get below minimum length, I'm adding this as a public feature request so it will be visible and could gather more votes from the members of the community: https://feedback.telerik.com/kendo-jquery-ui/1444570-enforceminlength-no-closing-the-dropdown-window-when-deleting-characters-get-below-minimum-length 

The Autocomplete widget is an extended input type=text so in case you would like to use value binding I would suggest you to consider trying Kedno Combobox, which enables you to use custom text and supports autocomplete functionality.

In terms of getting the id of the selected dataitem, you need to loop through the datasource items and extract the id of the relevant selected current item:

function getac() {
        var autoc = $('#autocomplete').data('kendoAutoComplete');
      	var data = autoc.dataSource.data();
        data.forEach(function(item) {
        	if(item.name === autoc.value()) {
						alert(item.id);
          }
        });
      }

Here is a sample showing this approach:

https://dojo.telerik.com/AHeSUmah/5

 

I hope this helps.

Best Regards,
Misho
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Doug
Posted on: 06 Dec 2019 22:31

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>
<script language="javascript">
  function setac() {
    var autoc = $('#autocomplete').data('kendoAutoComplete');
    autoc.value("only");
	  autoc.trigger("change");
  }
  function getac() {
    var autoc = $('#autocomplete').data('kendoAutoComplete');
    alert(autoc.dataItem(0).id);
  }  
  </script>
  </head>
<body>
  
<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
  suggest: false,
  dataTextField: "name",
  dataSource: {
    data: [{id: 1, name: "One"},{id: 2,name: "only"},{id:3,name: "Two"}],
  
  }
});
</script>
  <button onClick="javascript:setac();">do it</button>
  <button onClick="javascript:getac();">get it</button>
</body>
</html>

I think things are getting confused here. All I'm saying is that if you delete enough characters in the text field so that it gets below the minimum length then the drop down box should close automatically. I will implement the keyup event but seems like something the control should do automatically.

I love all of your controls, but the autoComplete seems oddly inferior.  There are a number of other things that just don't seem right.

1. Why is there no dataValueField?  Very few dataSources would have only one field in them.  This would solve a lot of problems I'm having using the autoComplete when I need to get the other fields associated with the dataItem.

2. Similarly you can't set the dataItem so when you're displaying information that is already defined.  (Say you're retrieving a record the user has previously saved) You can't set the control to that dataItem.  So your very practical MVVM feature completely falls apart. 

3. If the user had already selected an item, which sets the dataItem, you cannot change it.  Setting a value and or using suggest or triggering a change leaves the underlying dataItem intact. Run the above sample.

Type in two and select that item.  Click on get it.  The id value is 3.

Click on do it.  This sets the value to "only" and then triggers a change.  Click on get it.  You still get the same underlying id 3, not 2 which it should be.

 

ADMIN
Misho
Posted on: 04 Dec 2019 13:10

Hello,

Thank you for your feedback. When you set minLength, the filtering event is triggered only over the minimum length 

https://dojo.telerik.com/EbIfOTEq/3 

This behavior is implemented by design for the purpose of performance optimization when there are lots of items to be loaded from a remote datasource.

Please don't hesitate to contact us again if another issue pops up or in case you have other feedback or questions related to Kendo UI components.

Best Regards,
Misho
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Doug
Posted on: 03 Dec 2019 17:02
Don't you think the control should do this by default when enforceMnLength is enabled?  The work around is fine, just seems unnecessary to force the end users to do something the control should handle automatically.  Please add it to your dev list.
ADMIN
Misho
Posted on: 03 Dec 2019 14:10

Hi,

The autocomplete popup is opened once the min length of the input is reached e.g. 3. If you set enforceMinLength to true the widget will not show all items when the text of the search input is cleared and this behavior is by design:

- enforceMinLength set to false: https://dojo.telerik.com/OpuhEtIR

- enforceMinLength set to true: https://dojo.telerik.com/OhuhENOC/3

 

The filtering event is called when the min length is reached only so if you wish to filter for value below the min length I suggest you to consider attaching to the keyup event and close the autocomplete popup upon certain condition, for example:

 

 

$("#states").keyup(function() {
  		console.log( "Handler for .keyup() called." + auto.value() );
                if(auto.value().length < auto.options.minLength) {	
                   console.log("value less than minLength" );
       		   auto.close();
     		}
	});

 

Here is a sample showing this approach in action: https://dojo.telerik.com/aLITEhOh/5 

I hope this helps and you will manage to accomplish the desired behavior.

In case you have other questions related to Kendo UI components, please do not hesitate to contact us.

Best Regards,
Misho
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.