如何使用圖像和文字實現自動填充搜索框

Question

我想在自己的網站中實現一個搜索框，其中自動填充文字和照片。

這裏是我當前的代碼：

HTML：

<h4>search:<input type="text" id="name-list" /></h4> 

的JavaScript：

$(function() { 
    $("#name-list").autocomplete({ 
     source: function (request, response) { 
      $.ajax({ 
       url: "/Home/Searchuser", 
       type: "POST", 
       dataType: "json", 
       data: { 
        searchText: request.term, 
        maxResults: 10 
       }, 
       success: function (data) { 
        response($.map(data, function (item) { 
         return { 
          label: item.DisplayName + " R:" + item.Reputation, 
          value: item.DisplayName, 
          id: item.Id 
         } 
        })) 
       } 
      }) 
     }, 
     select: function (event, ui) { 
      alert(ui.item ? ("You picked '" + ui.item.label + "' with an ID of " + ui.item.id) : "Nothing selected, input was " + this.value); 
     } 
    }); 
}); 

我使用ASP.NET MVC2，而我傳遞json字符串（在查詢本地數據庫之後）將圖像url和其他信息從控制器傳遞到視圖。文字工作正常。

任何人都可以幫助我如何呈現圖像並追加到列表項？

Answer 1

我對代碼進行了這些更改，然後運行良好。

CSS：

DIV.list_item_container { 
    height: 90px; 
    padding: 0px; 
} 
DIV.image { 
    width:90px; 
    height: 90px; 
    float: left; 
} 
DIV.description { 
    font-style: italic; 
    font-size: 1.1em; 
    color: gray; 
    padding: 5px; 
    margin: 5px; 
} 
#name-list { 
    width: 300px; 
} 

的JavaScript：

$(document).ready(function() { 
    $('#name-list').autocomplete({ 
     source: function (request, response) { 
      $.ajax({ 
       url: "/Home/Searchuser", 
       data: { 
        searchText: request.term, 
        maxResults: 10 
       }, 
       dataType: "json", 
       success: function (data) { 

        response($.map(data, function (item) { 
         return { 
          value: item.DisplayName, 
          avatar: item.PicLocation, 
          rep: item.Reputation, 
          selectedId: item.UserUniqueid 
         }; 
        })) 
       } 
      }) 
     }, 
     select: function (event, ui) { 

      alert(ui.item ? ("You picked '" + ui.item.label) : "Nothing selected, input was " + this.value); 

      return false; 
     } 
    }).data("autocomplete")._renderItem = function (ul, item) { 
     var inner_html = '<a><div class="list_item_container"><div class="image"><img src="' + item.avatar + '"></div><div class="label"><h3> Reputation: ' + item.rep + '</h3></div><div class="description">' + item.label + '</div></div></a><hr/>'; 
     return $("<li></li>") 
      .data("item.autocomplete", item) 
      .append(inner_html) 
      .appendTo(ul); 
    }; 
});