Ibrahim İnce Ibrahim İnce - 1 month ago 11
Javascript Question

Merging two json file and using it in autocoplete plugin

I am trying to merge two JSON file and using it in autocompleteplugin.

But I do get an error

TypeError: $(...).easyAutocomplete is not a function
even I have added js library for both auto complete and jquery.

My code look like this:

<script src="jquery-3.1.0.js"></script>
<link href="easy-autocomplete.min.css" rel="stylesheet" />
<script src="jquery.easy-autocomplete.min.js"></script>



<script>
$.getJSON("file1.json", function (data1) {
$.getJSON("file2.json", function (data2) {
var final = $.extend({}, data1, data2);
var options = {
data: final,
getValue: "name",
list: {
match: {
enabled: true
}
},
theme: "square"
};
$("#KUNDE").easyAutocomplete(options); $('div.easy-autocomplete').removeAttr('style');
});
});
</script>

Answer

I made a working example based on your code.

Please check you have the correct paths when you include the script files. And also check if jQuery is included.

Hope will help you:

$.getJSON("https://api.myjson.com/bins/42jd0", function (data1) {
  $.getJSON("https://api.myjson.com/bins/5bjqc", function (data2) {
    var final = [];
    final.push(data1.employees1);
    final.push(data2.employees2);
    var new_final = final[0].concat(final[1]);
    var options = {
      data: new_final,
      getValue: "firstName",
      list: {
        match: {
          enabled: true
        }
      },
      theme: "square"        
    };
    $("#KUNDE").easyAutocomplete(options); $('div.easy-autocomplete').removeAttr('style');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/easy-autocomplete.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/jquery.easy-autocomplete.min.js"></script>

<div class='easy-autocomplete'>
  <input id="KUNDE"/>
</div>

You can run the code here by hitting the Run code snippet button or you can also check the jsfiddle I've made here.