Search code examples
jqueryajaxtagging

jQuery code keypress event similar to facebook tagging in wallpost '@'


Hello people I am actually a newbie in jquery and javascript, I am learning a lot though. I am actually trying to copy facebooks tagging of users in a wall post when '@' is input on the text area. To be more specific I have a text area when the user inputs '@' it will activate an ajax function that I have. I was already able to do the listing of users, what I only need now is the jquery code to activate the ajax function when user inputs an '@' in the text area. All your helps I will apreciate :D

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FB TAG</title>
<style>
.namesearch {
    cursor: pointer;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">


function putin_livesearch(fname, lname) 
{

$('#searchbar').val($('#searchbar').val()+fname + " " + lname);

}



function showResult(str)
{
if (str.length==0)
  {
  document.getElementById("livesearch").innerHTML="";
  document.getElementById("livesearch").style.border="0px";
  return;
  } 
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("livesearch").innerHTML=xmlhttp.responseText;
    document.getElementById("livesearch").style.border="1px solid #A5ACB2";


    }
  }
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>

<body>
<form>
  <textarea id ="searchbar" name="wallpost" type="text" rows="3" cols="80"  ></textarea>
  <div id="livesearch"></div>
</form>

</body>


Solution

  • I was able to solve it by myself. Thank you "myself" I love you

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>FB TAG</title>
    <style>
    .namesearch {
        cursor: pointer;
    }
    #searchbar {
        width: 458px;
        height: 50px;
        border: solid 2px #333;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        margin-bottom: 6px;
        text-align: left;
    }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="http://api.jquery.com/scripts/events.js"></script>
    </head>
    
    <body>
    <form>
      <div id="searchbar" contenteditable="true"></div>
      <div id="livesearch"></div>
    </form>
    <script type="text/javascript">
    
    function showResult(str)
    {
    if (str.length==0)
      {
      document.getElementById("livesearch").innerHTML="";
      document.getElementById("livesearch").style.border="0px";
      return;
      } 
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("livesearch").innerHTML=xmlhttp.responseText;
        document.getElementById("livesearch").style.border="1px solid #A5ACB2";
    
    
        }
      }
    xmlhttp.open("GET","getuser.php?q="+str,true);
    xmlhttp.send();
    }
    
    
    var start=/@/ig; // @ Match
    var word=/@(\w+)/ig; //@abc Match
    
    $("#searchbar").live("keyup",function() 
    {
    var content=$(this).text(); //Content Box Data
    var go= content.match(start); //Content Matching @
    var name= content.match(word); //Content Matching @abc
    
    var searchname = name.toString().substr(1);
    
    if(name.length>0)
    {
    
    
    
    alert(name);
    
    $("#livesearch").show();
    
    showResult(searchname);
    
    
    
    }
    
    
    return false();
    
    });
    
    
    function putin_livesearch(fname, lname) 
    {
    
    var old=$("#searchbar").html();
    var content=old.replace(word," ");
    $("#searchbar").html(content);
    
    
    $('#searchbar').append("<a href ='#'>"+fname+" " +lname+ "</a>");
    
    $("#livesearch").hide();
    
    }
    
    
    
    alert('asdasd');
    
    
    </script>
    </body>
    </html>