# P5.js input text

**URL:** <https://discourse.processing.org/t/p5-js-input-text/38887>\
**Category:** Coding Questions\
**Created:** [September 20, 2022, 6:43pm UTC](https://discourse.processing.org/t/p5-js-input-text/38887 "2022-09-20T18:43:41Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [September 20, 2022, 6:43pm UTC](https://discourse.processing.org/t/p5-js-input-text/38887/1 "2022-09-20T18:43:41Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [September 20, 2022, 7:11pm UTC](https://discourse.processing.org/t/p5-js-input-text/38887/2 "2022-09-20T19:11:11Z")

</div>

> [@Chrisir](#):
>
> … a text field where suggestions of what you going to type appear underneath your text.

You can add [**attribute()**](https://p5js.org/reference/#/p5.Element/attribute) _placeholder_ in order to have a hint when the text field is still empty:

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

> **[: The Input (Form Input) element - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder)**
>
> The HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The element is one...

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [September 20, 2022, 7:15pm UTC](https://discourse.processing.org/t/p5-js-input-text/38887/3 "2022-09-20T19:15:00Z")

</div>

> [@Chrisir](#):
>
> But how can I delete all previous options from the list?

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

[**createSelect()**](https://p5js.org/reference/#/p5/createSelect)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [September 20, 2022, 7:53pm UTC](https://discourse.processing.org/t/p5-js-input-text/38887/4 "2022-09-20T19:53:53Z")

</div>

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!

```auto
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;
      }
    }
  }
}

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

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [September 20, 2022, 9:57pm UTC](https://discourse.processing.org/t/p5-js-input-text/38887/5 "2022-09-20T21:57:02Z")

</div>

> [@Chrisir](#):
>
> No, I really need to empty the list.

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:

> <https://github.com/processing/p5.js/blob/v1.4.2/src/dom/dom.js#L713-L717>

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

You should replace these type of comments:

```auto
/////////////////////////////////////

```

w/ something similar to this 1:

```auto
/* =============================== */

```

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

```javascript
/////////////////////////////////////

```