Print Page - autocomplete comboxbox not working with editable=FALSE

Title: autocomplete comboxbox not working with editable=FALSE
Post by: Spike on May 13, 2015, 03:45:30 AM

Hello,

I have a combobox and works fine wit the autocomplete function.

When I disable Editable to FALSE autocomplete is not working anymore in the textbox of the combo.
(I dont want users to allow a own text.)

Is there a solution? Please help,

Thanks in advance.

Spike

Title: Re: autocomplete comboxbox not working with editable=FALSE
Post by: stworthy on May 13, 2015, 08:36:26 AM

If the 'editable' property is set to false, the user can not type text directly into the field.

Title: Re: autocomplete comboxbox not working with editable=FALSE
Post by: Spike on May 13, 2015, 08:53:27 AM

Thanks stworthy;

Ofcourse editable must be on TRUE;

My problem is;

I need the autocomplete function but don't want users to allow "free" text in the editbox of the combo.
They may only Search by autocomplete in de combo but I don't want to store this text in the database....

I only want a row selected by combobox and NOT the Search text.

Hope you understand else I will explain it by a graphic/ image.

Thanks in advance!
Spike

Title: Re: autocomplete comboxbox not working with editable=FALSE
Post by: lloyd on April 15, 2016, 07:04:24 AM

Here is how to validate an editable combobox.

Add a new validatebox rule

Code:

$.extend($.fn.validatebox.defaults.rules, {
    valid: {
        validator: function(value, param){
            var string = JSON.stringify($(param[0]).combobox('getData'));
            
            if (string.toLocaleUpperCase().indexOf('"' + value.toLocaleUpperCase() + '"') > 0) {
                return true;
            }
            else {
                return false;
            }
        },
        message: 'Invalid data.'
    }
});

Apply the new rule to your combobox (can be used with required: true)

Code:

    <input id="cc" class="easyui-combobox" name="dept" validType='valid[cc]' >

Validate onSubmit

Code:

$('#ff').form({
    url:...,
    onSubmit: function(){
        return $(this).form('enableValidation').form('validate');
    },
    success:function(data){
        alert(data)
    }
});

When you submit the form if the data entered in the combobox does not match the select option data the form returns false and the combobox in highlighted in red. :)

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: Spike on May 13, 2015, 03:45:30 AM