Comment ajouter une image à la zone de texte source autocomplete

Question

J'utilise autocomplete jquery pour charger les valeurs dans la zone de texte:

@Html.TextBox("Cities", "", new { @id="tags" }) 

<script type="text/javascript"> 
$(function() { 
     var availableTags = [ 
     "New York", 
     "London", 
     "Moscow", 
     "Paris", 
     "Berlin", 
     "Madrid", 
    ]; 
    $("#tags").autocomplete({ 
     source: availableTags 
    }); 
}); 

En fait, j'ai plus de 1000 villes et je vais les stocker dans la base de données et envoyer à la vue à travers le modèle. En outre, pour plus d'apparence agréable que je veux ajouter le drapeau du pays à la liste déroulante de ma zone de texte comme:

Comment puis-je faire? Comment ajouter une image à la source de l'autocomlète?

Answer 1

Je suis remplaçant la fonction _renderMenu dans ma solution:

_renderMenu: function(ul, items) { 
    var that = this; 
    $.each(items, function(index, item) { 
     that._renderItemData(ul, item) 
      .children("a") 
      .attr("title", item.value["@tooltip"]) 
      .prepend("<img class='menu_button_img' src='" + item.value["@icon"] + "' /> "); 
    }); 
}, 

Fonctionne bien pour moi :)

Answer 2

vous devez modifier le code html de votre source de saisie semi-automatique pour ajouter une image de drapeau, se pencher sur cette question add image to jQuery UI autocomplete remote source with cache