Hi all, I was hoping to get some advice on how to use createSelect() a little better. im trying to incorporate a dropdown to use with an autosuggest in my sketch. I sort of have it working, but instead of listing each item on its own line in the dropdown, it lists one item on the first, then two items in the second line (the first item + the second item), three items in the third (first item + second item + third item) and so forth Ex:
HAMMER
HAMMER HANDSAW
HAMMER HANDSAW HUMMER
instead of:
HAMMER
HANDSAW
HUMMER.
The auto suggestion that i currently have works, but only as a list that a person cant click on. I used “split” to list the items and that works great for the non-dropdown autosuggest. I thought this would/should work for the dropdown as well, but no, it doesnt.
Does anyone have any idea how to make this dropdown do what the original autosuggest does and list the items one by one instead of adding each subsequent item to the previous?
Heres my code:
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);
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();
}
///////////////////////////////////////////////////////////////////////////
function draw() {
background(255);
image(img, 0, 0);
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();
}
}
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], 25, 650);
sel.option(splitString[0]);
sel.position(20, 620);
// print(splitString[0]);
}
}
}
}
///////////////////////////////////////////////////////////////////////////
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;
}
}
}
}
///////////////////////////////////////////////////////////////////////////
// function mySelectEvent() {
// let item = sel.value();
// // background(200);
// name(item);
// }
Many thanks in advance!
