Referencing js values stored on GitHub

Hi all,

I’m working on a project which has a search bar that autocompletes of all the towns in England, UK as the user types.

At first I had only four towns on the list and the project worked just fine:

However, I now need values for all the towns in England and this exceeds webflow’s character limit for custom code.

I’ve hosted the line of code at https://raw.githubusercontent.com/willtmp/LocalHero/master/allareas.js but am not sure how to implement it. Trying to use < script src="…" > has not worked:

Anyone know how I could achieve this?

Thanks.

I think the idea is correct and should work, but you have placed the script in the wrong place. Place the line 120 above the entire code section and I think it should be ok. So basically like this:

<script src="https://raw.github.blahblablah">
<script> The script code you already have there</script>

Also you don’t need to host your js files elsewhere, you can change the suffix to txt and upload them to Webflow assets and it will work too. (Also if you only have a list like this it is possible to have it as a txt altogether if you change the code a little.)

Thanks for the reply witooZ. I’ve followed your advice to host on Webflow.

Unfortunately, calling the script above the entire code section hasn’t worked either.

I completely forgot/overlooked the the script src needs to have an closing tag as well. Also you can try to set type to text/javascript, maybe it will help. So try this:
<script type="text/javascript" src="https://yourlink"></script>

Thank you so much again – unfortunately still not resolved.

I thought the issue could be that I am trying to host just the one line of code defining the values for var ‘countries’, so copied the entire code to a .txt and uploaded the file as an asset to call via <script src =>, but it seems this didn’t work either.

Pretty baffled by this so any further suggestions would be appreciated!

Alright, let’s try it another way. Delete the var countries and the semicolon at the end of it from the txt file and add this to the beginning of your code:

  jQuery.get('url to the txt file', function(data) {
var countries = data;
});

So following your kind suggestions, my entire code looks like the following:

<form name="areasearchform" id="areasearchform" autocomplete="off" 
onsubmit="yourFunction()">
<div class="autocomplete" style="width:100%;">
<input class="form-field" id="myInput" type="text" name="myCar" placeholder="Search areas"; 
required>
<input class="searchicon" name="submitbutton" type="submit" value="";>
<style> 
	::placeholder { /* Firefox, Chrome, Opera */ 
		 color: #ffffff; 
			}   
		:-ms-input-placeholder { /* Internet Explorer 10-11 */ 
		 color: #ffffff; 
			} 
		::-ms-input-placeholder { /* Microsoft Edge */ 
		   color: #ffffff; 
			} </style>

</div>
</form>

<script>

jQuery.get('https://raw.githubusercontent.com/willtmp/LocalHero/master/allareas.js', 
function(data) {
var countries = data;
});

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;

  /*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.length; i++) {

    /*check if the item starts with the same letters as the text field value:*/

    if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {

      /*create a DIV element for each matching element:*/

      b = document.createElement("DIV");
      /*make the matching letters bold:*/
      b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
      b.innerHTML += arr[i].substr(val.length);

      /*insert a input field that will hold the current array item's value:*/

      b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";

      /*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();

          /*submit the form with the selected value:*/

          $("form").submit();
      });
      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,*/

    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 < 0) currentFocus = (x.length - 1);

/*add class "autocomplete-active":*/

x[currentFocus].classList.add("autocomplete-active");
}
function removeActive(x) {

/*a function to remove the "active" class from all autocomplete items:*/

for (var i = 0; i < x.length; i++) {
  x[i].classList.remove("autocomplete-active");
 }
}
function closeAllLists(elmnt) {

/*close all autocomplete lists in the document,
except the one passed as an argument:*/

var x = document.getElementsByClassName("autocomplete-items");
for (var i = 0; i < x.length; i++) {
  if (elmnt != x[i] && elmnt != inp) {
    x[i].parentNode.removeChild(x[i]);
    }
  }
 }
/*execute a function when someone clicks in the document:*/

document.addEventListener("click", function (e) {
  closeAllLists(e.target);
 });
}

/*An array containing all the country names in the world:*/
Here's where I originally had the var countries values.
/*initiate the autocomplete function on the "myInput" element, and pass along the countries array 
as possible autocomplete values:*/

autocomplete(document.getElementById("myInput"), countries);
</script>

Still having no luck with this code.

Can you link the published website? Maybe there will be something useful to find, but I’m running out of ideas.
Theoretically speaking, if the only problem is the length of the code, maybe you could just put the entire code over to the js file and link that, but it’s far from an elegant solution.