2

我实际上是在尝试复制 Facebook 的“@”标签风格。大部分已经做了。我现在唯一的问题是标记多个用户时。它不分配<a href>. 假设我写了一篇只有 1 个标签用户的帖子，它的放置<a href>是可以的。当谈论标记超过 1 个人时，最后一个标记用户只得到<a href>，而没有其他人。我不得不承认我是 Web 开发的新手，而且我对 JS 和 jQuery 还不是很擅长。我真的需要在 JavaScript 部分解决这个问题的帮助。

索引.html

<!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;
}
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;
}
</style>
<script type="text/javascript" src="js/jquery-latest.js"></script>
<script type="text/javascript" src="http://api.jquery.com/scripts/events.js"></script>
</head>

<body>
<form >
  <textarea name="data[UserDiscussionComment][comment]" class="textarea" id="searchbar" style="color: black; height: 18px; "></textarea>
  <input name="" type="button" value="Submit" onclick="submitwallpost()" />
  <div id="livesearch"></div>
</form>
<div id="wallpost"> </div>
<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
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>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],"<a href = 'http://classoncloud.org/" + userlink[arraycontroller] + "'>" + fullnamewp[arraycontroller] +"</a>");

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

    arraycontroller = arraycontroller + 1;

    //alert(lobot);

}

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

    alert(lobot);

    $('#wallpost').append("<div>"+ $("#searchbar").val() + "</div>");

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

}



</script>
</body>
</html>

php 文件 getuser.php

<?php
$q=$_GET["q"];

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

mysql_select_db("asd", $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 '<span class ="namesearch" onclick="putin_livesearch(\''.$fname.'\',\''.$lname.'\'  )"> '. $fname ." ". $lname .' </span><br />';


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


mysql_close($con);
?>
4

0 回答 0