custom variable inputs for each cart item on the cart page with a javascript autocomplete function for the input. The autocomplete working when the cart page loads. On changing the quantity and clicking update cart the javascript autocomplete function is lost. If the cart page is fully refreshed the autocomplete function works again. The function is losing the binding on partial page refresh when update cart is clicked.

I have tried using $(document).ready(function() (commented out in the code snip) but the browser throws a ‘$ is not a function’ for the $(document).ready(function()

How do I implement the bind so the autocomplete function works continuously?

—-Cart.php——

cart loop {

…

…

…

`

“>
is_sold_individually() ) {

$product_quantity = sprintf( ‘1 ‘, $cart_item_key );

} else {

$product_quantity = woocommerce_quantity_input(
array(
‘input_name’ => “cart[{$cart_item_key}][qty]”,
‘input_value’ => $cart_item[‘quantity’],
‘max_value’ => $mx_qty,
‘min_value’ => ‘1’,
‘product_name’ => $_product->get_name(),

),

$_product,

false

);

echo apply_filters( ‘woocommerce_cart_item_quantity’, $product_quantity, $cart_item_key, $cart_item ); // PHPCS: XSS ok.

  <tr>

    <td>    

      <input id="myInput<?php echo $i.$cart_item_key;?>" class='autoc' value="<?php echo $cart_item['woo_number'][$i];?>" name="woo_number<?php echo $cart_item_key;?>[]" type="text" autocomplete="off" minlength="1" maxlength="4" min="1"  border='1' data-product="<?php echo $product_id; ?>" required>

    </td>

   </tr>        

 </tbody>

`

`
function autocomplete(inp, arr) {
/*the autocomplete function takes two arguments,
the text field element and an array of possible autocompleted values:*/
var currentFocus;
/*execute a function when someone writes in the text field:*/
inp.addEventListener(“input”, function(e) {
var a, b, i, val = this.value;
var el_counter = 0;
var el_len = 0;
/*close any already open lists of autocompleted values*/
closeAllLists();
if (!val) { return false;}
currentFocus = -1;
/*create a DIV element that will contain the items (values):*/
a = document.createElement(“DIV”);
a.setAttribute(“id”, this.id + “autocomplete-list”);
a.setAttribute(“class”, “autocomplete-items”);
/*append the DIV element as a child of the autocomplete container:*/
this.parentNode.appendChild(a);
/*for each item in the array…*/
for (i = 0; i ” + arr[i].substr(0, val.length) + “”;
b.innerHTML += arr[i].substr(val.length);
/*insert a input field that will hold the current array item’s value:*/
b.innerHTML += “”;

/*execute a function when someone clicks on the item value (DIV element):*/
b.addEventListener(“click”, function(e) {
/*insert the value for the autocomplete text field:*/
inp.value = this.getElementsByTagName(“input”)[0].value;
/*close the list of autocompleted values,
(or any other open lists of autocompleted values:*/
closeAllLists();
});
a.appendChild(b);
}
}
}
});
/*execute a function presses a key on the keyboard:*/
inp.addEventListener(“keydown”, function(e) {
var x = document.getElementById(this.id + “autocomplete-list”);
if (x) x = x.getElementsByTagName(“div”);
if (e.keyCode == 40) {
/*If the arrow DOWN key is pressed,
increase the currentFocus variable:*/
currentFocus++;
/*and and make the current item more visible:*/
addActive(x);
} else if (e.keyCode == 38) { //up
/*If the arrow UP key is pressed,
decrease the currentFocus variable:*/
currentFocus–;
/*and and make the current item more visible:*/
addActive(x);
} else if (e.keyCode == 13) {
/*If the ENTER key is pressed, prevent the form from being submitted,*/
e.preventDefault();
if (currentFocus > -1) {
/*and simulate a click on the “active” item:*/
if (x) x[currentFocus].click();
}
}
});
function addActive(x) {
/*a function to classify an item as “active”:*/
if (!x) return false;
/*start by removing the “active” class on all items:*/
removeActive(x);
if (currentFocus >= x.length) currentFocus = 0;
if (currentFocus // $(document).ready(function() {
// $(‘.woocommerce’).on(‘change’, ‘.autoc’, function(){

/An array containing all the available ltd ed nos/
var arrlist = ”;
arrlist = [];

var jsqty = 0;
var jskey = ”;

jsqty = "";
jskey = "";

var str1 = ”;
str1 = ‘myInput’;
/initiate the autocomplete function on the "myInput" element, and pass along the countries array as possible autocomplete values:/
for (var i = 0; i < jsqty; i++) {
var num = i;
var str2 = num.toString();
var str3 = str1.concat(str2);
var myInput = str3.concat(jskey);
autocomplete(document.getElementById(myInput),arrlist);
}

//});
//});

} //end cart loop`