如何实现JS仿QQ邮箱收件人选择和搜索

导语：通过下面教程的学习，大家可以掌握如何实现JS仿QQ邮箱收件人选择和搜索，更多详情请关注应届毕业生考试网。

页面截图：

主要html代码：

<#--左侧-->

<p>

<label>To:</label>

<p id="ptxt" class="mailtxt_p"></p>

<input type="hidden" name="messName" id="messName"/>

<input type="hidden" name="messId" id="messId"/>

</p>

<p>

<label>Subject:</label>

<input type="text" name="messTitle" id="messTitle"/>

</p>

<p>

<label>Message:</label>

<textarea name="ddContent" id="ddContent"></textarea>

</p>

<#--右侧-->

<p>

<input calss="search_mail" type="text" value="Search Contact..." onclick="if(e==

'Search Contact...')e='';" onblur="if(e=='')e='Search Contact...';"

name="txtsearch" />

<p><img src="/images/email03.png" /></p>

</p>

<p class="mailclist">

<ul>

<li>

<p class="firstmail" title="Cata food, S.L." "

ass="Cata food, S.L.">Cata food, S.L.</p>

</li>

<li>

<p class="firstmail" title="Anqing Beverage" "

ass="Anqing Beverage">Anqing Beverage</p>

</li>

<li>

<p class="firstmail" title="123456ew" "

ass="123456ew">123456ew</p>

</li>

</ul>

</p>

主要js实现代码：

<script type="text/javascript">

$(function(){

//点击收件人列表到收件人

$("tmail")("click",function(){

var $mailTo=$(this)("ass");//收件人名称

var $mailToId=$(this)("alt");//收件人Id

var $ptxt_val=$("#ptxt")();//收件人框中的值

var $messId=$("#messId")();//隐藏的收件人Id

if($ptxt_xOf($mailTo)<0){//若不存在，则拼接

$("#ptxt")nd("<span class='rece' alt='"+$mailToId+";'>"

+$mailTo+";"+"</span>");

$messId=$messId+$mailToId+";";

}

$("#messId")($messId);

$("#messName")($("#ptxt")());//隐藏的`收件人名称

});

//点击某个收件人，添加样式

$("")("click",function(){

$("#ptxt")("")veClass("on");

$("#ptxt")("")("background-color","")("color","")

$(this)lass("on")("background-color", "#545f59")("color","#fff");

});

//点击删除键跟退格键，删除对应的收件人

$(document)('keydown',

function(event) {

var $messId=$("#messId")();//收件人Id的值

var $span_alt=$("#ptxt ")("alt");//选中的收件人

if($span_alt != null){

var $index,$span_size,$mess_size,$val;

$index=$xOf($span_alt);

$span_size=$span_th;

$mess_size=$th;

//删除对应的收件人Id

$val=$tring(0,$index)

+$tring($index+$span_size,$mess_size);

$("#messId")($val);

if(46==ode ){ //Delete键

$("#ptxt ")ve();

$("#messName")($("#ptxt")());

}else if(8==ode){//退格键

$("#ptxt ")ve();

$("#messName")($("#ptxt")());

return false;

}

}

}

);

//搜索框搜索事件

$("ch_mail")("blur",function(){

var content = $(this)();

if("Search Contact..." != content && content !=""){

$("clist li p")(function(){

var name = $(this)();

if(xOf(content) == -1){

$(this)();

}else{

$(this)();

}

});

} else {

$("clist li p")();

}

});

});

</script>