Question

我使用easyautocomplete plugin并且我有类似的数据：

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

但是我需要将这些数据用于html而不是jquery ..例如：

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

和我的工作实例

＆＃13;

$(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);
});

＆＃13;

<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>

＆＃13;

Answer 1

对Docs中可以找到的onClickEvent做出反应。然后找到当前选择的数据，构建HTML并将其添加到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>

如何将数据放入html而不是js？

1 个答案: