Having problem with Autocomplete not displaying images

Having problem with Autocomplete not displaying images

Hi,
I'm facing a problem with Autocomplete. whene i type for searching products it gives me suggestions.
it shows product name but not display images... it displays some images and some not.

when I inspect element it shows me this broken links 
  1. <ul id="ui-id-1" class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content" tabindex="0" style="display: none; top: 39px; left: 337px; width: 546px;"> 
  2. <li id="ui-id-11" class="ui-menu-item" tabindex="-1"> 
  3. <a>Classic</a> 
  4. <br> 
  5. <img alt="Office Tabel" office_table_1.jpg="" Furniture="" src="Products/Furniture/Office"> 
  6. </li> 
  7. <li id="ui-id-8" class="ui-menu-item" tabindex="-1"> 
  8. <a>Classic Bold</a> 
  9. <br> 
  10. <img style="width: 50px; height: 75px;" alt="Office Tabel" office_table_2.jpg="" Furniture="" src="Products/Furniture/Office"> 
  11. </li> 
  12. <li id="ui-id-9" class="ui-menu-item" tabindex="-1"> 
  13. <a>Classic Home</a> 
  14. <br> 
  15. <img style="width: 50px; height: 75px;" alt="Dinning Table" src="Products/Furniture/Home/dine_tale_1.jpg"> 
  16. </li> 
  17. </ul>

HTML
  1. <div class="ui-widget">
            <asp:TextBox ID="txtMovieName" runat="server" Width="80%" />
           
            </div>

Script
  1. <script type="text/javascript" language="javascript">
            $(function () {
                $('#<%= txtPrdctSearch.ClientID %>').autocomplete({
                    source: function (request, response) {
                        $.ajax({
                            url: "ProductSearchService.asmx/GetProductList",
                            data: "{'ProductName': '" + request.term + "'}",
                            type: "POST",
                            dataType: "json",
                            contentType: "application/json;charset=utf-8",
                            success: function (data) {
                                response(data.d);
                            },
                            error: function (result) {
                                var errorMsg = "There is a problem processing your request !!";
                                alert(errorMsg);
                            }
                        });
                    },
                    create: function (event, ui) {
                        $(this).data('ui-autocomplete')._renderItem = function (ul, item) {
                            return $('<li>')
                        .append('<a>' + item.ProductName + '</a>' + '<br>')
                        .append("<img src=" + item.ImagePath + " alt='img' style='width: 50px; height: 75px;' />")
                        .appendTo(ul);
                        };
                    },
                    search: function (e, u) {
                        $(this).addClass('loader');
                    },
                    response: function (e, u) {
                        $(this).removeClass('loader');
                    }
                });
            });
        </script>


There are some issues in above code.

1. The first image tag has no class.
2. First and second image tags have broken links and links and sequence out of order.
2 Third image tag is perfect.

Some physical image's folders have space between folder name. example. "Office Furniture/chair.jpg"
and some folders have space in folder name example "Home/home.jpg".

if jquery found space in folder name then it dose not display image..

friends, how to fix it ?

I know my english is very bad :(
I'll be very thankful
Regards