Need Some Logic Verification

[ScottLacey]

Okay, so I'm pretty new to jQuery but I am pretty experienced with PHP.  I am about to begin coding a script written mostly in jQuery.  It will use AJAX to verify that an article tag a user provides exists in a database.  When a user goes to write an article on my website, my form will ask them to add keyword tags which will be used in searches.  Basically only admins will be allowed to create new tags, so this is why I check the tags first.  And also to prevent duplicates and similar tag entries in the database.

 

The form will have a single input that the user will use to search for a tag.  Once the user hits the enter key, it will search the database for tags that already exist.  Once the ajax is complete, a list of related tags will pop up and the user will be able to select their desired tag by either clicking the tag link in the list or by pressing enter.

 

This is a very crude demonstration of what my idea is.

 

 

This is my flow chart.

 

Am I missing any steps?  Have any suggestions that would make this better?

Edited November 9, 2014 by ScottLacey

[kicken]

Rather than create a new system you could use something like Selectize.js. Other than that, looks like you have the process down. I don't think it's necessary to alert the user if they try and re-add an already added tag, or at they very least make the alert unobtrusive so it doesn't interrupt their flow. Likewise I don't think it's necessary to alert them if they press enter with an empty text box, just ignore it and wait for some value to be entered.

 

An improvement on the work flow might be to load the tags as they type rather than waiting for enter to be pressed. With each key press you'd start a timer which will load the results in x milliseconds. If another key is pressed before the timer is triggered, reset the timer. Once the timer triggers, make the ajax request to load tags matching the current value of the select box.

 

The reason for the timer is so that you're not making a request for each individual key press. Instead you wait for a short pause in the typing. A value around 250ms-450ms works well usually. Prevents requests for quick typers but is not a real noticeable delay between when typing stops and the list loads (assuming a quick request/response).

 

Here's an example of using a timer and processing while typing.

[ScottLacey]

Yeah I agree with you about alerting the user.  Seems like it would be more of an annoyance than anything else.  I was thinking about this more and realized it would be better to perform the search as the user types.  However, instead of a timer, do you think performing the search after every three or four types of a key would be more prudent?

[kicken]

Timer would be best. If you do it every n key presses then you may end up with someone sitting there waiting for results but nothing coming up because they haven't hit enough keys. I my self in many instances where there is an auto-suggest feature will consistently type three or four letters quickly then just pause and wait for the results to select the item I want. If what I typed wasn't enough of a filter, or the result didn't show (wrong spelling perhaps) then I'll just type one or two more letters or backspace a couple and try again.

 

Basically, the best user experience would be to:

- Search at each pause in typing

- Force search when enter is pressed

- Allow keyboard selection of results

- Keep feedback unobtrusive