Thursday, 19 September 2013

autocomplete in each row will return multiple values to fill-up the edit boxes in same row in a dynamic table

autocomplete in each row will return multiple values to fill-up the edit
boxes in same row in a dynamic table

I have a dynamic table with multi rows
<table>
<tr>
<td><input id="CustomerCompanyName" type="text"
class="Autocompletecompany" /></td>
<td><input id="QuoteCustomerId" type="text" class="QuoteCustomerId"
disabled /></td>
<td><input id="QuoteCurrencyId" type="text" class="QuoteCurrencyId"
disabled /></td>
</tr>
<tr>
<td><input id="CustomerCompanyName2" type="text"
class="Autocompletecompany" /></td>
<td><input id="QuoteCustomerId2" type="text" class="QuoteCustomerId"
disabled /></td>
<td><input id="QuoteCurrencyId2" type="text" class="QuoteCurrencyId"
disabled /></td>
</tr>
</table>
each row has an autocomplete textbox which will return more then value to
fill-up different edit box after spending couple of days searching for
solution I find a way to put all code together and making it work but I'm
facing one issue and I'm not able to resolve it
When the user searches in first row a list will display so the user can
select the company name and by selecting it, it will fill-up the
QuoteCustomerId and the QuoteCurrencyId
but then I try to do same scenario in second row the same list will be
display with a blank value and if you select any of them it will fill-up
the QuoteCustomerId and the QuoteCurrencyId with the correct value any
help please do i miss something there :
JavaScript
$(document).ready(function(){
$('.Autocompletecompany').autocomplete({
source:'CustomerList.php',
minLength:1,
select:function(event, ui)
{
var p = $(this).parent().parent(), i=ui.item;
p.find( ".QuoteCustomerId" ).val( i.id );
p.find( ".QuoteCurrencyId" ).val( i.QuoteCurrencyId );
return false;
}
})
.data( "ui-autocomplete" )._renderItem = function( ul, item )
{
return $( "<li>" )
.append( "<a><strong>" + item.CustomerCompanyName + "</strong><br>
Currency :" + item.QuoteCurrencyId + "<br> Address :" +
item.Address + "</a><hr>" )
.appendTo( ul );
};
});
thanks a lot I appreciate any help

No comments:

Post a Comment