'n.store.forEach is not a function while using the autoComplete.js

I am using WordPress ajax and autoComplete.js on my page.

I am getting below error in the console when I type anything in the input field

Uncaught (in promise) TypeError: n.store.forEach is not a function

I have the below code on my page and it's working. I haven't added the ajax code

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/[email protected]/dist/css/autoComplete.02.min.css">
<input name="getname" id="autoComplete" type="search" dir="ltr" spellcheck=false autocorrect="off" autocomplete="off" autocapitalize="off">
<button type="submit" class="btn bg-darkBlue  border-0" name="searchdata" id="searchdata"><span>SEARCH</span></button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/[email protected]/dist/autoComplete.min.js"></script>


<script type="text/javascript">
$("#searchdata").click(function() {
  allList();
});

allList();

function allList() {
  var id = jQuery("#autoComplete").val();

  jQuery.ajax({
    url: "/wp-admin/admin-ajax.php",
    type: "post",
    datatype: "json",
    data: {
      action: "getname",
      keyword: id
    },
    success: function(data) {
      console.log(data);
      //var country_list1 =data; // ajax response ["Test One","Test Two","Test Three","Test Four"];

      var country_list2 = ["Test One", "Test Two", "Test Three", "Test Four"]; // static data here

      const autoCompleteJS = new autoComplete({
        data: {
          src: country_list2,
          cache: true,
        },
        resultItem: {
          highlight: true
        },
        events: {
          input: {
            selection: (event) => {
              const selection = event.detail.selection.value;
              autoCompleteJS.input.value = selection;
            }
          }
        }
      });


    }
  });
}

Now I have the issue with the below code in ajax success. There are two variables created.

  1. One is country_list1 and the ajax output is shown in the comment.
  2. Second is country_list2 and I have added the same output which I am getting from ajax.

console.log(data);

 var country_list1 =data; // ajax response ["Test One","Test Two","Test Three","Test Four"];

 var country_list2 = ["Test One", "Test Two", "Test Three", "Test Four"]; // static data here

If I run the page with country_list2 then it's working and If I use country_list1 then I am getting the issue.

Any idea what is the issue here?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source