P5.js input text

p5.js Coding Questions
1

Hello all,

I have 2 questions about text input.

a)

I am looking for a text field where suggestions of what you going to type appear underneath your text. Similar to when you use save as and type an existing file name in the dialogue.

b) at the moment using sel = createSelect();
which is not very good. But how can I delete all previous options from the list?

Thanks to all!

Chrisir

2

You can add attribute() placeholder in order to have a hint when the text field is still empty:

createInput().attribute('placeholder', 'hint');

3

Take a look at createSelect()'s disable() method:

createSelect()

4

no I really need to empty the list

in this code I want to have auto-suggestions (from words from a list) to what I type in the text field and be able to copy from the list into the text field.

And when I delete the text in the text field, the list is empty again

Thank you!

let dia = 0;
let growAmount = 0.5;
let grow = true;

let input1, button, greeting, img, data, sel;

let resultContinuousSearch = "";

let url =
  "https://docs.google.com/spreadsheets/d/e/2PACX-1vRmua9Ue9Uv2olN_0kOvTbAPPBkJ3ckciRbDUs_jUr9eMv43sgdFrzmcluQGd4MQrsiYemarPqLsjVj/pub?gid=0&single=true&output=csv";

///////////////////////////////////////////////////////////////////////////

function preload() {
  data = loadTable(url, "csv", "header");
}

///////////////////////////////////////////////////////////////////////////

function setup() {
  createCanvas(1794, 1000);

  img = loadImage("LMP Map2.png");
  name = null;

  input1 = createInput();
  input1.position(20, 600);
  input1.changed(myinputEvent);
  input1.input(myinputEvent);

  button = createButton("submit");
  button.position(input1.x + input1.width, 600);
  button.mousePressed(greet);

  greeting = createElement("h2", "Search (Press Esc to clear)");
  greeting.position(20, 550);

  rcs = createElement("rcs");
  rcs.position(20, 620);

  sel = createSelect();
  sel.size(310, 22);
}

///////////////////////////////////////////////////////////////////////////

function draw() {
  background(255);
  //  image(img, 0, 0);

  sel.position(20, 620);

  //let item = sel.value();

  if (keyIsPressed) {
    if (keyCode == ENTER || keyCode == RETURN) {
      greet();
    } else if (keyCode == 51) {
      input1.value("screwdrivers"); // test
    } else if (keyCode == 27) {
      input1.value(null);
      name = null;
      dia = 0;
      sel.remove();
      sel = createSelect();
      sel.size(310, 22);
    }
  }

  getData();

  //checkInput();
}

///////////////////////////////////////////////////////////////////////////

function checkInput() {
  // NOT an event

  resultContinuousSearch = "";

  if (input1.value().length >= 1) {
    c1 = data.getColumn("TOOL");

    for (let i = 0; i < c1.length; i++) {
      if (contains(c1[i], input1.value())) {
        // console.log(c1[i]);
        //let A = split(resultContinuousSearch, ",");
        //resultContinuousSearch += c1[i] + "\n";

        let names = resultContinuousSearch;
        var splitString = split(names, ",");
        fill(0, 0, 0);
        textSize(20);
        text(splitString[0], 350, 650);

        sel.option(c1[i], c1[i]);
        sel.position(20, 620);
        sel.changed(mySelectEvent);

        //print(sel.value());
      }
    }
  }
}

///////////////////////////////////////////////////////////////////////////

function mySelectEvent() {
  let item = sel.value();
  // background(200);
  input1.value(item);
}

function myinputEvent() {
  checkInput();
}

///////////////////////////////////////////////////////////////////////////

function contains(s1, s2) {
  for (let i = 0; i < min(s1.length, s2.length); i++) {
    if (s1[i].toUpperCase() != s2[i].toUpperCase()) return false;
  }
  return true;
}

///////////////////////////////////////////////////////////////////////////

function greet() {
  //Changes input1.value to uppercase in console, NEED TO MAKE NOT CASE SENSITIVE
  name = input1.value().toUpperCase();
  string =
    name.charAt(0).toUpperCase() + name.substr(1, name.length).toUpperCase();
  print(string);

  if (name == "") {
    // input1.value(null);
    dia = 0;
  }
}

///////////////////////////////////////////////////////////////////////////

// function anim1() {
//   //Creates the animation for location of item
//   fill(0, 255, 0);
//   ellipse(c, xLoc, dia, dia);

//   if (dia > 50) {
//     grow = false;
//   }
//   if (dia < 0) {
//     grow = true;
//   }

//   if (grow == true) {
//     dia += growAmount;
//   } else {
//     dia -= growAmount;
//   }
// }

///////////////////////////////////////////////////////////////////////////

function getData() {
  for (let i = 0; i < data.getRowCount(); i++) {
    let row = data.getRow(i);
    let c = row.getString("TOOL");
    let l = row.getNum("LOCATION");
    // let xLoc = row.getNum("X Coordinate");
    // let yLoc = row.getNum("Y Coordinate");

    if (l == 1) {
      var xLoc = 500;
      var yLoc = 200;
    }

    if (l == 2) {
      var xLoc = 350;
      var yLoc = 200;
    }

    if (l == 3) {
      var xLoc = 200;
      var yLoc = 500;
    }

    // print(xLoc);
    // noLoop();

    if (name == c) {
      fill(0, 255, 0);
      ellipse(xLoc, yLoc, dia, dia);

      if (dia > 50) {
        grow = false;
      }
      if (dia < 0) {
        grow = true;
      }
      if (grow == true) {
        dia += growAmount;
      } else {
        dia -= growAmount;
      }
    }
  }
}

///////////////////////////////////////////////////////////////////////////
5

They don’t mention anything about removing an option().

But surprisingly, option() itself can be used to remove a value from the dropdown menu if we pass false as its 2nd argument, as we can see from its source code:

P.S.: Those random green sections from your posted code makes harder to study it!

You should replace these type of comments:

/////////////////////////////////////

w/ something similar to this 1:

/* =============================== */

Alternatively you can explicitly state to the Discourse forum that’s a JS code block by writing javascript right after the top triple backticks like this.
```javascript

/////////////////////////////////////
2 Likes