I have a dynamic input field created with class name as sub-category. On key press autoplete is working fine, from which i can select one.

Working code for that is below

$("body").on('keypress', 'input.sub-category', function () {
        var availableTags = [
            {label:"ActionScript", value:"1"},
            {label:"ActionScript1", value:"11"},
            {label:"ActionScript2", value:"12"},
            {label:"ActionScript3", value:"13"},
            {label:"ActionScript4", value:"14"},
        ];
        $(this).autoplete({
            source: availableTags,
        });
    });

When i select one of the autosuggested text say 'ActionScript', it's value (1) should be available in the below code, how i can access it? On select alert function is working fine, so just need to know how to access value of the selected label.

$("body").on('autopleteselect', 'input.sub-category', function () {
        alert('here');
});

In addition to that i would like to know how to set the selected text in the input box rather than it's value.

I have a dynamic input field created with class name as sub-category. On key press autoplete is working fine, from which i can select one.

Working code for that is below

$("body").on('keypress', 'input.sub-category', function () {
        var availableTags = [
            {label:"ActionScript", value:"1"},
            {label:"ActionScript1", value:"11"},
            {label:"ActionScript2", value:"12"},
            {label:"ActionScript3", value:"13"},
            {label:"ActionScript4", value:"14"},
        ];
        $(this).autoplete({
            source: availableTags,
        });
    });

When i select one of the autosuggested text say 'ActionScript', it's value (1) should be available in the below code, how i can access it? On select alert function is working fine, so just need to know how to access value of the selected label.

$("body").on('autopleteselect', 'input.sub-category', function () {
        alert('here');
});

In addition to that i would like to know how to set the selected text in the input box rather than it's value.

• javascript
• jquery

Share Improve this question Follow asked Jul 18, 2016 at 11:12 user866933user866933 33511 gold badge66 silver badges1616 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

you need to include jquery-ui file "https://code.jquery./ui/1.12.0/jquery-ui.js" in your file and just replace

 $("body").on('autopleteselect', 'input.sub-category', function () {
        alert('here');
});

with the following lines.

$("body").on('autopleteselect', 'input.sub-category', function (event,ui)     {
    alert(ui.item.label);
    alert(ui.item.value);

});

and

$(this).autoplete({
        source: availableTags,
    });

with

$(this).autoplete({
        source: availableTags,
        select:function(event,ui){
           $(".sub-category").val(ui.item.label);return false;
        }
    });

and this will work fine for more info please go on following link

http://api.jqueryui./autoplete/

More than easy!

It's here http://api.jqueryui./autoplete/#event-select
And it says, that You may bind handler in such manner

$( ".selector" ).on( "autopleteselect", function( event, ui ) {} );

where ui is Object which has item which in turn has selected label and value data.