在實現自定義HTML菜單時丟失jQuery自動完成功能「選擇」功能

我正在嘗試使用自定義下拉菜單實現jQuery自動完成功能。我可以使用data（）._ renderItem方法（註釋掉）自定義菜單項，但是這會禁用菜單「選擇」功能。如果我嘗試通過「標籤」字段自定義菜單項「選擇」功能可以工作，但我的菜單項HTML被解釋爲字符串。任何人都可以提出一個乾淨的方式來完成這一點。在實現自定義HTML菜單時丟失jQuery自動完成功能「選擇」功能

$("input#selectedInput") 

.bind("autocompleteselect", function (event, ui) { 
alert("Sel item " + JSON.stringify(ui.item.json)); 
}) 



.autocomplete({ 
appendTo: "#list", 
source: function (request, response) { 
    //alert("success"); 
    $.ajax({ 
     //url: "http://itunes.apple.com/search?term=jack+johnson&entity=musicTrack", 
     url: "Example REST URL", 
     dataType: "jsonp", 
     data: { 
      featureClass: "P", 
      style: "full", 
      maxRows: 12, 
      name_startsWith: request.term 
     }, 

     success: function (data) { 
      response($.map(data.results, function (item) { 
       itunesJson = item; 
       return { 
        label: "<li><img src='" + item.artworkUrl30 + "' alt='no photo'/>" + item.trackName + "</li>", 
       } 
      })); 
     }, 
    }); 
} 
}) 
/* 
     .data("autocomplete")._renderItem = function(ul, item) { 
     return $("<li></li>") 
      .data("item.autocomplete", item) 
      .append("<img src='"+item.value+"' alt='no photo'/>"+ item.label) 
      .appendTo(ul); 
    }; 
     */

來源

2012-04-27 Ben Pearce

嘗試在返回HTML如將圖像周圍的錨標記。 ...

.data("autocomplete")._renderItem = function(ul, item) { 
return $("<li></li>") 
     .data("item.autocomplete", item) 
     .append("<a><img src='"+item.value+"' alt='no photo'/></a>"+ item.label) 
     .appendTo(ul);

來源

2012-05-24 22:04:11 user1416168

實際上你必須在你的LI中有定位標記作爲你的根節點，以便定製自動完成功能。 – kamasheto 2012-09-09 14:00:14

試着在這裏讀：http://www.devbridge.com/projects/autocomplete/jquery/。這是我需要自動完成時使用的。配置非常簡單。請告訴我，如果它不符合您的需求。

來源

2012-04-28 10:22:25 alexarsh

OP嘗試使用此jQuery用戶界面自動完成 – naveen 2012-04-28 11:01:33

亞歷克斯喜做出下拉列表，感謝您的答覆。然而，我正在尋找一個限制jQuery Mobile的自動完成庫的解決方案（即沒有進一步的插件）。 – 2012-04-28 22:58:10

好的。那麼這個怎麼樣：http://www.andymatthews.net/read/2012/03/27/jQuery-Mobile-Autocomplete-now-available – alexarsh 2012-04-29 08:11:03

一個簡單的解決方法將是HTML Encode list using JavaScript標籤已分配成功的呼叫

var elm = $("#list"); 
elm.html(elm.text());

工作撥弄後：http://jsfiddle.net/naveen/yRwH7/

來源

2012-04-28 12:31:46 naveen

感謝您的代碼。這會正確呈現菜單，但自動完成「select」事件不會觸發。 – 2012-04-28 22:55:19

在實現自定義HTML菜單時丟失jQuery自動完成功能「選擇」功能

回答

相關問題