Organizations Input

[brannondorsey]

So I have been working on back end stuff for the implementation of organizations stuff and I was thinking that it would be pretty easy to just use a regular text input form for filling in organizations. Not that we shouldn't use the boxes you are working on, I just don't think that we have to. We could use javascript to grab the current value of the input form (i.e. SAIC, Xgallery, VMFA) by just doing some basic string manipulation like:

var formValue = //use jQuery to get the form value
var lastComma = formValue.lastIndexOf(',');
var orgBeingTyped = formValue.substring(lastComma);
orgBeingTyped = $.trim(orgBeingTyped);

//ajax request goes here (i.e. indexd.io/api/organization_list.php?chars=orgBeingTyped) 

Does that make since? We can then have the <select>'s <option>s dynamically generated to reflect autocomplete options for the organization the user is currently typing.

If you want to run with the box thing by all means do so. I was just thinking that if you were doing that as a work around you might not have to. This would also help keep the organization sign up process congruent with tags and media in a way that I think would be a good idea from a flow standpoint.

Here is a good link for an autocomplete example also.

UPDATE

I actually cooked up a lil working example forya here at lib/includes/organizations_sandbox.php.

Essentially it is fully functional and works exactly like the form on the register/account page would work.

• It gives autocomplete suggestions as you type (right now they are just displayed underneath)
• It notices if you have typed a comma (or comma-space) delimited list and only gives you a suggestion on the current word
• and it adds all new words (ones didn't already exist in the database) from the list to the db.

What do you thank?

[brannondorsey]

I realized that we actually wouldn't be using <select> but you get the idea.

[kevinzweerink]

While I agree that your route is better for creating consistency between media, tags, and orgs, the problem is that by leaving the text in the input box we open up the possibility of someone going back to edit an organization in the middle of the list. Then we have to be able to autocomplete on things in the middle of the list too (not super complicated), but then there are also all sorts of things that could get messed up if they delete a comma by accident or something. I don't think that's a dealbreaker necessarily, but it's something to think about. I'll play with both tomorrow night.

[brannondorsey]

Ok sounds good!

[brannondorsey]

You might already know about this but it seems like jQuery UI has an autocomplete widget that promises to knock our socks off. Here is an example of it in action.

[brannondorsey]

Also, I forgot to mention that you will need the new users and organizations tables to make this work. I included an sql export in my last commit. The users table with new organizations and bookmarked_users columns is located at db_backups/db_backups/database_with_organizations_and_bookmark_list.txt (I forgot to save it as .sql so just remember to do that)

The organizations table is located at db_backups/organizations_table.sql.

[kevinzweerink]

@brannondorsey We should have the organizations endpoint return objects instead of a simple array, that way we can add more parameters if we want, e.g. number of users in the organization and stuff.

[brannondorsey]

We should turn the organization <input>'s autocomplete attribute off (as long as that doesn't disable your fancy autocomplete) so that they don't get generic browser autocomplete results.

[kevinzweerink]

@brannondorsey done. The input containing the organizations as a comma delimited list has id of organization. It should submit with the rest of the form when the user clicks save changes.

[brannondorsey]

The return icon helps a ton! Do you think that from an interaction standpoint it is strange to press enter each time you add an organization?

[brannondorsey]

Alright, I hooked up the organizations input on both the Account and the Register page. Whenever a user adds or remove organizations it updates the users table. It also "scans" both inputs for new organizations and adds them to the organizations table when it finds them.

I think that we need to think about a way to better integrate this interaction with the rest of the form's flow. When I was testing it felt strange to write two comma delimited lists on the media and tags inputs and then immediately be required to press return after each new list item when filling out the organizations input. A few times I actually screwed up my testing because I was leaving the organization I was trying to add in the input field instead of hitting enter (which felt natural because thats how the rest of the field works). If I am stupid enough to do that I think other people might be too.

We don't have to work on this now seeing as it is fully functional and we probably should move on but maybe we should come back to it before launch. Play around with it and tell me if you disagree.