Jquery UI自動完成與圖像

我在這段代碼中出現錯誤。有誰能夠幫助我？Jquery UI自動完成與圖像

<h4>search:<input type="text" id="name-list" /></h4> 
<script type="text/javascript" language="javascript"> 
$(function() { 
     $("#name-list") 
    .autocomplete({ 
     source: function (request, response) { 
       $.ajax({ 
       url: "/Home/Searchuser", type: "POST", dataType: "json", 
       data: { searchText: request.term, maxResults: 10 } 
      }) 

      return false; 

     }, 

     minLength: 1 

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

    }); 
</script>

從服務器上正確接收數據。我犯了什麼錯誤？

來源

2012-10-01 Manoj

什麼樣的錯誤？你檢查過「控制檯」嗎？ – JoeFletch

我在控制檯中看不到特定的錯誤。我刪除了數據（「自動完成」）._ renderItem覆蓋函數，並指定在Ajax塊本身的「返回」。然後它工作正常。當我添加此_renderItem代碼塊autosuggessions不顯示。我想用文字顯示圖像。這就是爲什麼我添加了該部分 – Manoj

我用你的代碼製作了一個[jsFiddle]（http://jsfiddle.net/TheJoeFletch/xuZqn/），它似乎很好。 – JoeFletch

@ JoeFletch感謝您的幫助。

我對代碼進行了這些更改，然後運行良好。這裏是我使用的一些CSS。

<style type="text/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; 


    } 
</style>

這裏是我的腳本

$(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("ui-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("ui-autocomplete-item", item) 
        .append(inner_html) 
        .appendTo(ul); 
     }; 


    });

感謝@Joe。我更新了答案。

來源

2012-10-04 11:13:04 Manoj

對於任何人再看一遍。由mjmrz提供的代碼是太棒了，但只能達到jQuery UI 1.8。

之後.data("autocomplete")需要更改爲.data("ui-autocomplete")和.data("item.autocomplete"，項目）需要更改爲b .data("ui-autocomplete-item", item)。

否則，沒有圖像。希望這可以幫助別人。

來源

2017-01-30 03:15:10

Jquery UI自動完成與圖像

回答

相關問題