Javascript function replacing arrays with anchor href
<p>Good Day. I am actually trying to copy facebooks '@' tagging style. Did most of it already. The only problem I have now is when tagging multiple users. It doesn't assign the . Say I wrote a post with only 1 tag user, its putting of  is okay. When talking about tagging more than 1 person, the last tag user only gets the , but not the others. I have to admit I am new to web developing, and I am not that really good yet with js and jquery. I really need help on solving this in the javascript part.</p>

<p><strong>index.html</strong> </p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;FB TAG&lt;/title&gt;
&lt;style&gt;
.namesearch {
    cursor: pointer;
}
textarea {
    margin-top: 10px;
    margin-left: 10px;
    width: 650px;
    resize: none;
    font-family: Arial, Helvetica, sans-serif;
    padding-left: 10px;
    padding-top: 10px;
    min-height: 30px;
    font-size: 14px;
    word-wrap: break-word;
}
#wallpost {
    height: 600px;
    width: 600px;
    margin-top: 22px;
    border-top-style: dotted;
    border-right-style: dotted;
    border-bottom-style: dotted;
    border-left-style: dotted;
    border-top-width: thin;
    border-right-width: thin;
    border-bottom-width: thin;
    border-left-width: thin;
}
&lt;/style&gt;
&lt;script type="text/javascript" src="js/jquery-latest.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="http://api.jquery.com/scripts/events.js"&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;form &gt;
  &lt;textarea name="data[UserDiscussionComment][comment]" class="textarea" id="searchbar" style="color: black; height: 18px; "&gt;&lt;/textarea&gt;
  &lt;input name="" type="button" value="Submit" onclick="submitwallpost()" /&gt;
  &lt;div id="livesearch"&gt;&lt;/div&gt;
&lt;/form&gt;
&lt;div id="wallpost"&gt; &lt;/div&gt;
&lt;script type="text/javascript"&gt;



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 &amp;&amp; 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
var odo = "odo";

var lobot;
var fullnamewp =new Array();
var userlink =new Array();
var arraycontroller = 0; 

$("#searchbar").on("keyup",function() 
{
    var content=$(this).val(); //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&gt;0)
    {

        //alert(odo);

        $("#livesearch").show();

        showResult(searchname);

        odo = "burugudoy";

    }


    return false();
});


function putin_livesearch(fname, lname) 
{
    //alert(arraycontroller);

    userlink.push(fname+"."+lname); //adds an entry in userlink array

    fullnamewp.push(fname+ " " +lname); // adds an entry fullnamewp in array

    var old=$("#searchbar").val(); //gets  value of searchbar

    var content=old.replace(word,""); // replaces the @ in old to ""


    $("#searchbar").val(content); //replaces value of searchbar to value of content

    var fullname = $('#searchbar').val()+ fullnamewp[arraycontroller]; //adds the full name to the searchbar

    $('#searchbar').val(fullname); //adds fullname to search bar 

    $("#livesearch").hide(); //hides the live search div



    lobot= $("#searchbar").val().replace(fullnamewp[arraycontroller],"&lt;a href = 'http://classoncloud.org/" + userlink[arraycontroller] + "'&gt;" + fullnamewp[arraycontroller] +"&lt;/a&gt;");

    //alert(userlink);
    //alert(fullnamewp);

    arraycontroller = arraycontroller + 1;

    //alert(lobot);

}

function submitwallpost()
{   
    $("#searchbar").val(lobot);

    alert(lobot);

    $('#wallpost').append("&lt;div&gt;"+ $("#searchbar").val() + "&lt;/div&gt;");

    $("#searchbar").val("");

}



&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p><strong>the php file getuser.php</strong></p>

<pre><code>&lt;?php
$q=$_GET["q"];

$con = mysql_connect('localhost', 'root', '');
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("placeoncloud_main", $con);

$sql=" SELECT * FROM profiles WHERE firstname like '".$q."%' ";

$result = mysql_query($sql);



while($row = mysql_fetch_array($result))
  {
  $fname = $row['firstname'];
  $lname = $row['lastname'];


  echo '&lt;span class ="namesearch" onclick="putin_livesearch(\''.$fname.'\',\''.$lname.'\'  )"&gt; '. $fname ." ". $lname .' &lt;/span&gt;&lt;br /&gt;';


  //echo "&lt;span class ='namesearch' onclick='putin_livesearch(" .$fname. ", " .$lname. " )'&gt; " . $fname . " " . $lname . "&lt;/span&gt;&lt;br /&gt;";
  }


mysql_close($con);
?&gt;
</code></pre>
