は、jQueryのオートコンプリートのラベルに画像を挿入したいが、画像のsrcがテキスト

Question

私はjQueryのオートコンプリートのラベルに画像を挿入したい

$(function() { 
     function log(message) { 
      $("<div/>").text(message).prependTo("#log"); 
      $("#log").attr("scrollTop", 0); 
     } 

     $("#city").autocomplete({ 
      source: function(request, response) { 
       $.ajax({ 
        url: "http://ws.geonames.org/searchJSON", 
        dataType: "jsonp", 
        data: { 
         featureClass: "P", 
         style: "full", 
         maxRows: 12, 
         name_startsWith: request.term 
        }, 
        success: function(data) { 
         response($.map(data.geonames, function(item) { 
          return { 
           label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName, 
           value: item.name 
          } 
         })); 
        } 
       }); 
      }, 
      minLength: 2, 
      select: function(event, ui) { 
       log(ui.item ? 
        "Selected: " + ui.item.label : 
        "Nothing selected, input was " + this.value); 
      }, 
      open: function() { 
       $(this).removeClass("ui-corner-all").addClass("ui-corner-top"); 
      }, 
      close: function() { 
       $(this).removeClass("ui-corner-top").addClass("ui-corner-all"); 
      } 
     }); 
    }); 
    </script> 



<div class="demo"> 

<div class="ui-widget"> 
    <label for="city">Your city: </label> 
    <input id="city" /> 
    Powered by <a href="http://geonames.org">geonames.org</a> 
</div> 

<div class="ui-widget" style="margin-top:2em; font-family:Arial"> 
    Result: 
    <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div> 
</div> 

</div> 

が、画像srcがラベル内のテキストとして出力されるように出力されます。

私はこのようなsuccess機能を変更しようとした：

success: function(data) { 
    response($.map(data.geonames, function(item) { 
     return { 
      label: item.name + "<img src='/images/glif.png'/>" + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName, 
      value: item.name 
     } 
    })); 
} 

Answer 1

あなたはExtensible Autocompleteプラグインを見たことがありますか？これにより、ラベルにマークアップを使用できるようになります。