How to prevent the page from constantly updating when adding Chosen Image in the ready mode of an Asp.net document

Question

In one of my ASP.Net projects, I used the selected image ( https://github.com/djgrant/chosen-image ) to add images to the drop-down list.

I added the selected library. Everything works great for the elite. It will create the selected list view if I use the following code in the document load function.

 $(document).ready(function () {
          $(".chosen-select").chosen({
              disable_search_threshold: 10
                 });
    }

Then I wanted to add images to the list. So I added the js files of the selected image file and the css files and changed the above code as follows.

$(document).ready(function () {
              $(".chosen-select").chosenImage({
                  disable_search_threshold: 10
                     });
        }

At the end, I attach the images to the list.

protected void Bind_BuyerImages() {
        if (cmbBuyer != null)
        {
            foreach (ListItem li in cmbBuyer.Items)
            {
                li.Attributes["data-img-src"] = "../Buyers/" + li.Value; 
            }
        }
    }

The list view displays all the images, but the page is constantly updated. How can I prevent this?

Answer 1

, chosenImage, Git, chosen, item list,

,

$('.chosen-select').chosen({
    template: function (text, templateData) {
        return "<img src='" + templateData.imgsrc + "'></img> <span>" + text + "</span>";
    }
});

item, class (img span ), class CSS

, list,

foreach (ListItem li in cmbBuyer.Items)
{
    li.Attributes["data-imgsrc"] = "../Buyers/" + li.Value; 
}

:

, , 2 template,

template: function (text, value, templateData)

template: function (text, templateData)

: Demo (CSS , ), , .