CODEWITHSUNDEEP
javascriptjqueryhtml
ani_css
ani_css

Reputation: 2126

How to put data in html instead of js?

I'm using easyautocomplete plugin and I have data something like that:

 data: [ {name: "Facebook", icon: "images/facebook.png"},
      {name: "Germany", icon: "images/germany.png"},
      {name: "Twitter", icon: "images/twitter.png"}],

but I need to use this data with html not jquery..for example like that:

<ul>
<li>Facebook <img src="images/facebook.png"></li>
<li>Germany <img src="images/germany.png"></li>
</ul>

and my working example 

$(document).ready(function() {
  var options = {
    data: [ 
        {name: "Facebook", icon: "images/facebook.png"},
        {name: "Germany", icon: "https://cdn3.iconfinder.com/data/icons/finalflags/16/Germany-Flag.png"},
        {name: "Twitter", icon: "images/twitter.png",url: "http://www.google.com"},
        {name: "Linkedin", icon: "images/linkedin.png"},
        {name: "Google Plus", icon: "images/google_plus.png"},
        {name: "Vimeo", icon: "images/vimeo.png"}
    ],
    getValue: 'name',
    list: {
      match: {
        enabled: true
      }
    },
    template: {
      type: "iconLeft",
      fields: {
        iconSrc: "icon"
      }
    }
  };

  $("#social").easyAutocomplete(options);
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/easy-autocomplete.min.css" rel="stylesheet" />
<input type='text' id='social'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/jquery.easy-autocomplete.min.js"></script>

Upvotes: 1

Views: 112

Answers (1)

Marijan
Marijan

Reputation: 1855

React to the onClickEvent you can find in the Docs. Then find the data of the current selection, build your HTML and add it to the DOM.

$(document).ready(function(){
var options = {
    data: [ {name: "Facebook", icon: "images/facebook.png"},
    {name: "Germany", icon: "https://cdn3.iconfinder.com/data/icons/finalflags/16/Germany-Flag.png"},
    {name: "Twitter", icon: "images/twitter.png",url: "http://www.google.com"},
    {name: "Linkedin", icon: "images/linkedin.png"},
    {name: "Google Plus", icon: "images/google_plus.png"},
    {name: "Vimeo", icon: "images/vimeo.png"}],
    getValue: 'name',
    list: {
        match: {
            enabled: true
        },
        onClickEvent: function() {
            var $newItem = $('<li />'),
                data = $("#social").getSelectedItemData();

            $newItem.text(data.name + ' ')
                .append($('<img />').attr('src', data.icon));

            $('#selection-here').append($newItem);
        }
    },
    template: {
        type: "iconLeft",
        fields: {
            iconSrc: "icon"
        }
    }
};

$("#social").easyAutocomplete(options);
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/easy-autocomplete.min.css" rel="stylesheet"/>
<input type='text' id='social'>
<ul id="selection-here"></ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/jquery.easy-autocomplete.min.js"></script>

Upvotes: 4

Related Questions