JavaScript Dropdown menu

• 

  pbbythesea · Member · Apr 26, 2018 at 5:25 pm

  • Copy link
  • Add topic to favorites

  Hi,

  Had a success in building an input box which you can write in and it will produce so auto suggestions.

  I have based the code on:
  https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_autocomplete

  The only problem is that I have had to cut the code down to make it work within a Contact Form 7 form. It works apart from one aspect – when you start typing in the box the suggestions do appear but you cannot use the arrow keys to select the one you would like you have to select via the mouse. Could you let me know what is missing in the code?

  At the moment all of the JavaScript is under the html code for the form… should it be there or should I try to move it within functions.php?

  <h2>Autocomplete - this is the one that I am updating</h2>
  
  <p>Start typing:</p>
  
  <!--Make sure the form has the autocomplete function switched off:-->
  <form autocomplete="off" action="/action_page.php">
    
      [select menu-479 include_blank ]
      Last Name
      
      
    
    <input type="submit">
  </form>
  
  
  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[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 

  The page that it is on is: http://www.shimi.com.au/pbtest-workingmodel/

  Many thanks,

  Paul

• 

  staff-zinnia · Staff · Apr 26, 2018 at 6:42 pm

  • Copy link

  Hi Paul –

  Are you inquiring about shimi.com.au? That site is not connected to WordPress.com.

  There are 2 versions of WordPress. WordPress.com is a managed environment different from using the open source WordPress installation. See here: https://en.support.wordpress.com/com-vs-org/