[英]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. 大家好,我实际上是jquery和javascript的新手,但是我学到很多东西。 I am actually trying to copy facebooks tagging of users in a wall post when '@' is input on the text area.
实际上,当在文本区域中输入“ @”时,我实际上试图在墙上的帖子中复制用户的Facebook标签。 To be more specific I have a text area when the user inputs '@' it will activate an ajax function that I have.
更具体地说,当用户输入“ @”时,我有一个文本区域,它将激活我具有的ajax函数。 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.
我已经能够列出用户了,现在我只需要一个jquery代码来激活用户在文本区域中输入“ @”时的ajax函数。 All your helps I will apreciate :D
您的所有帮助,我都会感激: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>
Like this? 像这样?
<!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)
{
$("#livesearch").empty().css('border', 0);
}
$.get("getuser.php?q="+str, function(txt) {
$("#livesearch").html(txt).css('border', "1px solid #A5ACB2");;
});
}
$(function() {
$('#searchbar').keyup(function() {
var val = $(this).val();
if (val.indexOf('@') !== -1) {
showResult(val);
}
});
});
</script>
</head>
<body>
<form>
<textarea id ="searchbar" name="wallpost" type="text" rows="3" cols="80" ></textarea>
<div id="livesearch"></div>
</form>
</body>
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.