Auto username suggestions

Question

Dear all,
I m building a small web application.i have two text fields.

1. UserName
2. Location

I want that when user enters any username by its own it should checl whether that username is available or not.If not available it should autogenerate list of usernames ,and by selecting that username it shuld get filled in username textbox.i want to implement this functionality after user has entered his username.

Answer 1

http://api.jquery.com/jQuery.getJSON/

You'll need some kind of script at the serverside to query the database and return JSON containing a boolean for whether it's available and an (optional) array of suggestions.

Make your app work without the javascript first, otherwise it will all go bad when someone uses a browser you're not expecting, like a Blackberry or WinMo startphone without JS enabled. You might even get people intentionally disabling JS to break into your app.

Answer 2

You have several steps to achieve this.

1. After user blur()'s out of the input, you should make an AJAX request to a web service
2. The web service gets the username as param and puts it against the database to check whether is valid or taken
3. If the username is valid responds with something like "ok", otherwise generates random names based on the original one received as param with the help of a dictionary (it would be nice) or just appending/prepending random strings to the original.
4. After 1 generated name is ready, it should be check again against the database to assure it's unique.
5. Your AJAX request from point 1. gets a response. Checks if is equal to "ok" (in this case, you're finished), other wise displays the data received from the service (I recommend JSON) in a <div> (just to say, use any element you want) with a specific class (let's call it generated) like the following: <div><span class="generated">generatedUsername</span>...</div>

6. You have to give some life to the generated class:

   $(document).ready(function () { $('.generated').live('click', function () { $('#usernameINPUT').val($(this).text()); }); });