導語：通過下面教程的學習，大家可以掌握如何實現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>
