Auto suggest username like gmail using php with ajax - Mostlikers

04 February, 2015

Auto suggest username like gmail using php with ajax

While registration time user registering their username in the username column, that time the same user name already exist in the database, for that we are creating auto generation of  username like gmail and all. like that we are suggesting some username for users. Take a look at live demo.

Auto suggest username like gmail using php with ajax



Live demo              Download

Database

CREATE TABLE IF NOT EXISTS `users` (
`id` int(11) NOT NULL,
  `username` varchar(100) NOT NULL,
  `password` varchar(200) NOT NULL
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ;

Html and Ajax

$(document).on('change','#username',function(){} - #username input id value post ajax.php page.if username already exist in database php function while to create new username not exist username get this $("#suggestname") element.

<html>
    <body>
        <form>
        <label>Username</label>
        <input type="text" name="username"  id="username"  />
        <span id="status"></span>
        <div id="suggestname"></div>
        </form>
    </html>
</body>

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
 $(document).on('change','#username',function(){
    var username = $("#username").val();
    if(username.length >3) {
    var url = "ajax.php";
    $("#status").html('<img src="loader.gif" align="absmiddle">&nbsp;Checking.'); 
        $.ajax({
          type: "POST",
          url : url,
          data: $("#username").serialize(),
          success: function(msg)
           {
             if(msg == 'OK')
                {               
                    $("#suggestname").hide();
                    $("#status").html('Avalible');
                }  
                else  
                {  
                     $("#status").html('Already exist.');
                     $("#suggestname").html('Availble : <a href="">'+msg+'</a>');
                    
                }   
           }
       });
      else
       {
            $("#status").html('Please enter more then 4 letters');
       }          
    return false;
    });
</script>

Ajax.php

$db - Mysqli database connection.
check_user - function create random value along with username. it will while check again new username exist or not to the database.
mysqli_num_rows - checking row exist or not.

<?php 
$db = new mysqli('localhost', 'root', '', '1next2');
if(isset($_POST['username'])):
    extract($_POST);
    $username=mysqli_real_escape_string($db,$username);
    $sql = $db->query("select id from users where username='$username'");
    if(mysqli_num_rows($sql))
    {
        $user = preg_replace('/([^@]*).*/', '$1',$username);
        echo $uuser =check_user($user,$db);
    }
  else
    {
        echo 'OK';
    }
 endif;
function check_user($user,$db)
    {
        $sql = $db->query("select id from users where username='$user'");   
        if(mysqli_num_rows($sql))
        {
            echo $uuser = $user.rand ( 1 , 99 );
            check_user($uuser,$db);
        }
        else return $user;
    }
?>

I hope you are really like this post .if have you any suggestion comment below. for more updates subscribe to our website. Thank for your visiting keep in touch with us







2 comments:

  1. It does not seem to work with IDs? Tried username which seems to work fine but when I tried using with ID it got stuck on checking availability.

    ReplyDelete