'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.
- One is
country_list1and the ajax output is shown in the comment. - Second is
country_list2and 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 |
|---|
