javascript - Jquery Ui AutoComplete is not working with keyupdown when used with label value - Stack Overflow

admin管理员组

文章数量:1022670

When using keyup keydown to select option from autoplete list textbox is showing value. But incase of selection from mouse it is working properly. JsFiddle -

$("#promoteActionTextBox").autoplete({
        source: actionNames,
        minLength: 0,
        select: function (event, ui) {
            event.preventDefault();
            $(this).val(ui.item.label);
            $('#promoteActionError').hide();
            $(this).attr('actionId', ui.item.value);
        },
        change: function (event, ui) {
            if (!ui.item) {
                $(this).val('');
            }
            else {

                $('#promoteActionError').hide();
                $(this).val(ui.item.label);
                $(this).attr('actionId', ui.item.value);
            }
        }
    }).focus(function (event, ui) {
        event.preventDefault();
        $('#promoteActionTextBox').autoplete("search");
        this.value = ui.item.label;
    });

When using keyup keydown to select option from autoplete list textbox is showing value. But incase of selection from mouse it is working properly. JsFiddle - http://jsfiddle/0c21r1pe/1

$("#promoteActionTextBox").autoplete({
        source: actionNames,
        minLength: 0,
        select: function (event, ui) {
            event.preventDefault();
            $(this).val(ui.item.label);
            $('#promoteActionError').hide();
            $(this).attr('actionId', ui.item.value);
        },
        change: function (event, ui) {
            if (!ui.item) {
                $(this).val('');
            }
            else {

                $('#promoteActionError').hide();
                $(this).val(ui.item.label);
                $(this).attr('actionId', ui.item.value);
            }
        }
    }).focus(function (event, ui) {
        event.preventDefault();
        $('#promoteActionTextBox').autoplete("search");
        this.value = ui.item.label;
    });

• javascript
• jquery
• jquery-ui
• autoplete

Share Improve this question Follow edited Jan 16, 2015 at 7:23 Manjay_TBAG asked Jan 16, 2015 at 6:25 Manjay_TBAGManjay_TBAG 2,25533 gold badges2424 silver badges4646 bronze badges 2

• @Innovarion - My jsfiffle link - jsfiddle/0c21r1pe/1 – Manjay_TBAG Commented Jan 16, 2015 at 7:15
• There is problem with value change it into something like avalue then it will work – Innovation Commented Jan 16, 2015 at 10:27

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

change the object property name from value to something else and it works

WORKING DEMO

UPDATE

How about THIS FIDDLE

I added a code which removes the event which is responsible for that effect.

create:function(){
    $('.ui-autoplete').unbind('menufocus');
}

select: function(event, ui) {
    event.preventDefault(); // Add on keyboard keyup, keydown is working well
    $("#id_value").val(ui.item.value);
    $("#id_label").val(ui.item.label);
},
focus: function( event, ui ) {
    event.preventDefault(); // Add on keyboard keyup, keydown is working well
    $("#id_value").val(ui.item.value);
    $("#id_label").val(ui.item.label);
}

When using keyup keydown to select option from autoplete list textbox is showing value. But incase of selection from mouse it is working properly. JsFiddle -

$("#promoteActionTextBox").autoplete({
        source: actionNames,
        minLength: 0,
        select: function (event, ui) {
            event.preventDefault();
            $(this).val(ui.item.label);
            $('#promoteActionError').hide();
            $(this).attr('actionId', ui.item.value);
        },
        change: function (event, ui) {
            if (!ui.item) {
                $(this).val('');
            }
            else {

                $('#promoteActionError').hide();
                $(this).val(ui.item.label);
                $(this).attr('actionId', ui.item.value);
            }
        }
    }).focus(function (event, ui) {
        event.preventDefault();
        $('#promoteActionTextBox').autoplete("search");
        this.value = ui.item.label;
    });

When using keyup keydown to select option from autoplete list textbox is showing value. But incase of selection from mouse it is working properly. JsFiddle - http://jsfiddle/0c21r1pe/1

$("#promoteActionTextBox").autoplete({
        source: actionNames,
        minLength: 0,
        select: function (event, ui) {
            event.preventDefault();
            $(this).val(ui.item.label);
            $('#promoteActionError').hide();
            $(this).attr('actionId', ui.item.value);
        },
        change: function (event, ui) {
            if (!ui.item) {
                $(this).val('');
            }
            else {

                $('#promoteActionError').hide();
                $(this).val(ui.item.label);
                $(this).attr('actionId', ui.item.value);
            }
        }
    }).focus(function (event, ui) {
        event.preventDefault();
        $('#promoteActionTextBox').autoplete("search");
        this.value = ui.item.label;
    });

• javascript
• jquery
• jquery-ui
• autoplete

Share Improve this question Follow edited Jan 16, 2015 at 7:23 Manjay_TBAG asked Jan 16, 2015 at 6:25 Manjay_TBAGManjay_TBAG 2,25533 gold badges2424 silver badges4646 bronze badges 2

• @Innovarion - My jsfiffle link - jsfiddle/0c21r1pe/1 – Manjay_TBAG Commented Jan 16, 2015 at 7:15
• There is problem with value change it into something like avalue then it will work – Innovation Commented Jan 16, 2015 at 10:27

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

change the object property name from value to something else and it works

WORKING DEMO

UPDATE

How about THIS FIDDLE

I added a code which removes the event which is responsible for that effect.

create:function(){
    $('.ui-autoplete').unbind('menufocus');
}

select: function(event, ui) {
    event.preventDefault(); // Add on keyboard keyup, keydown is working well
    $("#id_value").val(ui.item.value);
    $("#id_label").val(ui.item.label);
},
focus: function( event, ui ) {
    event.preventDefault(); // Add on keyboard keyup, keydown is working well
    $("#id_value").val(ui.item.value);
    $("#id_label").val(ui.item.label);
}

本文标签： javascriptJquery Ui AutoComplete is not working with keyupdown when used with label valueStack Overflow