case ’m’：    element.style.fontSize="12px";
    element.style.fontFamily="arial,sans-serif";
    element.style.backgroundColor="#3366cc";
    element.style.color="black";
    element.style.width=（’keyword’）。clientWidth-2+"px";
    element.style.height="20px";
    element.style.padding="1px 0px 0px 2px";
    if（element.displaySpan）element.displaySpan.style.color="white"
    break;
    case ’d’：
    element.style.fontSize="12px";
    element.style.fontFamily="arial,sans-serif";
    element.style.backgroundColor="white";
    element.style.color="black";
    element.style.width=（’keyword’）。clientWidth-2+"px";
    element.style.height="20px";
    element.style.padding="1px 0px 0px 2px";
    if（element.displaySpan）element.displaySpan.style.color="green"
    break;
    case ’t’：
    element.style.width="80%";
    if（window.navigator.userAgent.toLowerCase（）。indexOf（"firefox"）！=-1）element.style.cssFloat="left";
    else element.style.styleFloat="left";
    element.style.whiteSpace="nowrap";
    element.style.overflow="hidden";
    element.style.textOverflow="ellipsis";
    element.style.fontSize="12px";
    element.style.textAlign="left";
    break;
    case ’h’：
    element.style.width="20%";
    if（window.navigator.userAgent.toLowerCase（）。indexOf（"firefox"）！=-1）element.style.cssFloat="right";
    else element.style.styleFloat="right";
    element.style.textAlign="right";
    element.style.color="green";
    break;
    }
    }
    function focusitem（index）
    {
    if（（’item’+lastindex）！=null）setstyle（（’item’+lastindex），’d’）；
    if（（’item’+index）！=null）
    {
    setstyle（（’item’+index）， ’m’）；
    lastindex=index;
    }
    else （"keyword"）。focus（）；
    }
    function searchclick（index）
    {
    （"keyword"）。value=（’title’+index）。innerHTML;
    flag=true;
    }
    function searchkeydown（e）
    {
    if（（’rlist’）。innerHTML==’’）return;
    var keycode=（window.navigator.appName=="Microsoft Internet Explorer"）？event.keyCode:e.which;
    //down
    if（keycode==40）
    {
    if（lastindex==-1||lastindex==listlength-1）
    {
    focusitem（0）；
    searchclick（0）；
    }
    else{
    focusitem（lastindex+1）；
    searchclick（lastindex+1）；
    }
    }
    if（keycode==38）
    {
    if（lastindex==-1）
    {
    focusitem（0）；
    searchclick（0）；
    }
    else{
    focusitem（lastindex-1）；
    searchclick（lastindex-1）；
    }
    }
    if（keycode==13）
    {
    focusitem（lastindex）；
    （"keyword"）。value=（’title’+lastindex）。innerText;
    }
    if（keycode==46||keycode==8）{flag=false;ajaxsearch（F（’keyword’）。substring（0,F（’keyword’）。length-1）。Trim（））；}
    }
    function showresult（xmlhttp）
    {
    var result=unescape（xmlhttp.responseText）；
    if（result!=’’）{
    var resultstring=new StringBuffer（）；
    var title=result.split（’’）[0];
    var hits=result.split（’’）[1];
    for（var i=0;i<title.split（’|’）。length;i++）
    {
    resultstring.append（’<div id="item’+i+’" onmousemove="focusitem（’+i+’）" onmousedown="searchclick（’+i+’）">’）；
    resultstring.append（’<span id=title’+i+’>’）；
    resultstring.append（title.split（’|’））；
    resultstring.append（’</span>’）；
    resultstring.append（’<span id=hits’+i+’>’）；
    resultstring.append（hits.split（’|’））；
    resultstring.append（’</span>’）；
    resultstring.append（’</div>’）；
    }
    （’rlist’）。innerHTML=resultstring.tostring（）；
    for（var j=0;j<title.split（’|’）。length;j++）
    {
    setstyle（（’item’+j），’d’）；
    （’item’+j）。displaySpan=（’hits’+j）；
    setstyle（（’title’+j），’t’）；
    setstyle（（’hits’+j），’h’）；
    }
    showsearch（title.split（’|’）。length）；
    listlength=title.split（’|’）。length;
    lastindex=-1;
    }
    else hiddensearch（）；
    }
    function ajaxsearch（value）
    {
    new Ajax.Request（’search.php’，{method:"get",parameters:"action=do&keyword="+escape（value），onComplete:showresult}）；
    }
    function main（）
    {
    （’keyword’）。className=（’keyword’）。className==’inputblue’？’inputfocus’：’inputblue’；
    if（F（’keyword’）。Trim（）==’’）hiddensearch（）；
    else
    {
    if（F（’keyword’）！=’’&&flag==false）ajaxsearch（F（’keyword’）。Trim（））；
    if（listlength!=0）（’keyword’）。onkeydown=searchkeydown;
    else hiddensearch（）；
    }
    }
    function oninit（）
    {
    （’keyword’）。autocomplete="off";
    （’keyword’）。onfocus=main;
    （’keyword’）。onkeyup=main;
    （’keyword’）。onblur=hiddensearch;
    createlist（）；
    }
    Event.observe（window,’load’，oninit）；
    </script>
    搜索框
    CODE:
    <form id="form1" name="form1" method="post" action="">
    <b>输入搜索关键字</b>
    <input name="keyword" type="text" class="inputblue" id="keyword" maxlength="20" style="width:300px;" />
    </form>

(责任编辑：12图资源库)