使用类似的ID访问输入值

Question

I have several input fields on my page which are dynamically created. In JQuery, I am trying to get the value of the one that I am typing into so that I can pass the value to my php script to populate the autocomplete.

For instance:

 <input id="inventory_location_1">
 <input id="inventory_location_2">
 <input id="inventory_location_3">
 <input id="inventory_location_4">
 <input id="inventory_location_5">
 <input id="inventory_location_6">

If I am entering text into "inventory_location_1" for some reason I can't use var strValue = $(this).val(); to get the text of the box that I am typing into. Jquery throws an error.

Here is my full Jquery script;

 $(function() {
        $('input[id^=inventory_location_]').autocomplete({
            source: function( request, response ) {
                $("#progressBar").show();
                var strValue = $(this).val();
                alert(asdf);
                $.ajax({
                    url: '{{ path('inventory_id_via_ajax_array') }}',
                    dataType: "json",
                    data: {
                        featureClass: "P",
                        style: "full",
                        maxRows: 12,
                        value: strValue
                    },
                    success: function( data ) {
                        if(data.responseCount <= 0){
                        }
                        response( $.map( data.responseData, function( item ) {
                            return {
                                label: item.name,
                                name: item.name,
                                value: item.name,
                                id: item.id
                            }
                        }));
                        $("#progressBar").hide();
                    }
                });
            },
            minLength: 2,
            select: function( event, ui ) {
                $("#progressBar").hide();
                $(this).val(ui.item.label);
            },
            open: function() {
                $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
            },
            close: function() {
                $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
            }
        });
    });

Not sure what to do, I have done everything that I can think of. Also, if you see other things in my script that are not right, please advise. Thanks for your help!!!

Answer 1

Here's a simple workaround that works well when you initialize a plugin on many elements in page but need access to each specific element

 $('input[id^=inventory_location_]').each(function(){
           /* within $.each  "this" is the current element*/
           var ID=this.id; // can now pass  variable into plugin wherever you need it
             $(this).autocomplete({/* options*/});

});