พร้อมท์การค้นหาอาแจ็กซ์

ตารางฐานข้อมูล: คัดลอกเนื้อหาไปยังโค้ดคลิปบอร์ด:

CREATE TABLE `xqbar`.`suggest` (
`id` INT ไม่เป็นโมฆะ AUTO_INCREMENT
`ชื่อ` VARCHAR( 100 ) ไม่เป็นโมฆะ
`hits` INT ไม่ใช่ค่าเริ่มต้น NULL '0'
คีย์หลัก (`id`)
) ENGINE = แทรก InnoDB

ลงในค่าแนะนำ (ชื่อ, การเข้าชม) ('xqbar.com', 100);
แทรกลงใน Suggest(title,hits)values('www.xqbar.com',410);
แทรกลงในค่าแนะนำ (ชื่อ, ฮิต) ('http://xqbar.com',700);
แทรกเข้าไปในค่าแนะนำ (ชื่อ, การเข้าชม) ('mail:xqbar.com',200);
แทรกเข้าไปใน Suggest(title,hits)values('ftp:xqbar.com',100);
แทรกลงในค่าแนะนำ (ชื่อ, การเข้าชม) ('http://www.xqbar.com',70)search.php
(ฉันไม่ได้สัมผัส PHP มานานแล้ว หาก PHP ด้านล่างนี้ใช้คำมากเกินไป ฉันต้องการคำแนะนำจากผู้เชี่ยวชาญ)
สตริงข้อมูลที่ส่งคืนควรเป็น xxx1|xxx2$200|100 เนื้อหาการคัดลอกที่เกี่ยวข้องกับโค้ดคลิปบอร์ดก่อนและหลัง:

<?php
ถ้า($_GET["การกระทำ"]!=''){
#รับคำสำคัญที่ผู้ใช้ป้อน
$keyword=$_GET["คำหลัก"];
#กรองคำสำคัญ
$keyword=str_replace("[", "[[]",$keyword);
$keyword=str_replace("&","[&]",$keyword);
$keyword=str_replace("%","[%]",$keyword);
$keyword=str_replace("^","[^]",$keyword);
#ลิงค์ฐานข้อมูล
$conn=mysql_connect("localhost", "xqbar", "xqbaradmin");
#เลือกฐานข้อมูล
@mysql_select_db("xqbar") หรือ die('ขออภัย');
mysql_query('ตั้งชื่อ utf-8');
#คำสั่งสอบถาม
$sql="select title,hits from แนะนำตำแหน่งเช่น '%".$keyword."%' เรียงลำดับตาม hits desc จำกัด 10";
$result=mysql_query($sql);
#Loop เพื่อรับผลลัพธ์แบบสอบถามและส่งกลับสตริง
#รูปแบบคือผลลัพธ์ 1|ผลลัพธ์ 2$จำนวนคลิกของผลลัพธ์ 1|จำนวนคลิกของผลลัพธ์ 2
ถ้า($ผล){
$i=1;$title='';$hits='';
ในขณะที่($row=mysql_fetch_array($result,MYSQL_BOTH))
-
$title=$title.$row['title'];
$hits=$hits.$row['ฮิต'];
ถ้า($i<mysql_num_rows($ผล))
-
$title=$title"|";
$hits=$hits"|";
-
$i++;
-
-
mysql_close();
-
-
<?php echo $title.'$'.$hits;?>โค้ด js เพื่อคัดลอกเนื้อหาไปยังโค้ดคลิปบอร์ด:

หลังจากแนะนำ prototye.js แล้ว เพื่อนบางคนบอกว่าไลบรารีนี้ใหญ่เกินไป หรือถ้าคุณไม่คุ้นเคย คุณสามารถใช้เฟรมเวิร์ก jquery.js หรือสร้างออบเจ็กต์ ajax โดยตรงได้ ฉันไม่อยากพูดถึงเรื่องนี้ ที่นี่ฉันอ้างอิงกรอบงาน prototye.js โดยตรง
<script type="text/javascript" src="prototype.js"></script>
รหัส js เพื่อสร้างเลเยอร์และแสดงผลลัพธ์แบบสอบถาม
<script type="text/javascript">
//กำหนดตัวแปร Lastindex เพื่อแสดงตำแหน่งที่เมาส์เลื่อนไปที่ผลลัพธ์ของแบบสอบถาม โดยเริ่มแรกคือ -1
var Lastindex=-1;
//กำหนดแฟล็กตัวแปรเพื่อระบุว่าจะดำเนินการค้นหา ajax ตามคำหลักที่ผู้ใช้ป้อนหรือไม่ false หมายความว่าอนุญาตให้ทำการสืบค้น และ true หมายความว่าห้ามทำการสืบค้น
var flag=false;
//ความยาวของอาร์เรย์ที่สร้างโดยผลลัพธ์การสืบค้นที่ส่งคืน
var รายการความยาว = 0;
//สร้างสตริงที่กำหนดเองเพื่อเพิ่มประสิทธิภาพ
ฟังก์ชั่น StringBuffer(){this.data=[];}
//งานที่มอบหมาย
StringBuffer.prototype.append=function(){this.data.push(arguments[0]);ส่งคืนสิ่งนี้;}
//เอาท์พุท
StringBuffer.prototype.tostring=function(){return this.data.join("");}
//ลบช่องว่างทั้งสองด้านของสตริง
String.prototype.Trim = function(){return this.replace(/(^s*)|(s*$)/g, "");}
//ฟังก์ชันที่ซ่อนอยู่ส่วนใหญ่จะซ่อนเลเยอร์แบบเลื่อนลงพร้อมท์ที่แสดงและ iframe ฟังก์ชันของ iframe จะกล่าวถึงด้านล่าง
ฟังก์ชั่นการค้นหาที่ซ่อนอยู่()
-
$('rlist').style.display="none";
$('rFrame').style.display="none";
-
//ฟังก์ชันการแสดงผลจะแสดงเลเยอร์พร้อมท์แบบเลื่อนลงและหมายเลขพารามิเตอร์ iframe เป็นหลัก ตามพารามิเตอร์นี้ ความสูงของเลเยอร์พร้อมท์และ iframe ที่จะแสดงจะถูกควบคุม
ฟังก์ชั่น showsearch (หมายเลข)
-
$('rlist').style.display='';
$('rFrame').style.display='';
// ที่นี่ ฉันกำหนดความสูงพร้อมต์ของผลลัพธ์การค้นหาแต่ละรายการที่ส่งคืนเป็น 20px และความสูงรวมของเลเยอร์พร้อมท์จะถูกเพิ่มเป็น num เนื่องจากฉันใช้การเติมทีละหนึ่งพิกเซลเมื่อกำหนดสไตล์
$('rlist').style.height=num*20+num+'px';
//วางตำแหน่งความสูงของ iframe ด้วย
$('rFrame').style.height=num*20+num+'px';
-
//ส่งคืนฟังก์ชันพิกัดของกล่องป้อนข้อความ องค์ประกอบพารามิเตอร์คือวัตถุที่จะส่งคืน พารามิเตอร์ออฟเซ็ตสามารถเป็น offsetLeft|offsetTop ซึ่งแสดงถึงตำแหน่งที่แน่นอนของวัตถุจากมุมด้านบนของหน้าต่างด้านซ้ายตามลำดับ
//www.devdao.com ใช้ฟังก์ชันนี้เพื่อค้นหาเลเยอร์พร้อมท์ที่เราต้องการแสดง เพื่อให้เลเยอร์พร้อมท์แสดงอย่างถูกต้องด้านล่างช่องป้อนข้อความ
ฟังก์ชั่น getposition (องค์ประกอบ, ออฟเซ็ต)
-
วาร์ค=0;
ในขณะที่ (องค์ประกอบ)
-
c+=องค์ประกอบ[ออฟเซ็ต];
องค์ประกอบ=องค์ประกอบ.offsetParent
-
กลับค;
-
//ฟังก์ชันในการสร้างเลเยอร์พร้อมท์จะรวมเลเยอร์พร้อมท์ไว้ด้วย และเพื่อหลีกเลี่ยงไม่ให้กล่องแบบเลื่อนลงที่เลือกปรากฏใต้ช่องป้อนข้อความ เลเยอร์พร้อมต์ของเราจะไม่เลือก iframe ที่อยู่ด้านบนอีกต่อไป
//สามารถเข้าใจได้ว่าเมื่อมีการเลือกกล่องแบบเลื่อนลงใต้ช่องป้อนข้อความ จะเป็นกล่องแบบเลื่อนลงที่เลือก -iframe-prompt layer จากล่างขึ้นบน
ฟังก์ชั่น createlist()
-
//สร้างเลเยอร์พร้อมท์
var listDiv=document.createElement("div");
//แจ้งรหัสเลเยอร์
listDiv.id = "rlist";
listDiv.style.zIndex="2";
listDiv.style.position="สัมบูรณ์";
listDiv.style.border="ทึบ 1px #000000";
listDiv.style.groundColor="#FFFFFF";
listDiv.style.display = "ไม่มี";
listDiv.style.width=$('คำหลัก').clientWidth+"px";
listDiv.style.left=getposition($('คำหลัก'),'offsetLeft')+1.5+"px";
listDiv.style.top =(getposition($('keyword'),'offsetTop')+$('keyword').clientHeight +3)+"px";

var listFrame=document.createElement("iframe");
listFrame.id = "rFrame";
listFrame.style.zIndex = "1";
listFrame.style.position = "สัมบูรณ์";
listFrame.style.border = "0";
listFrame.style.display = "ไม่มี";
listFrame.style.width=$('keyword').clientWidth+"px";
listFrame.style.left=getposition($('คำหลัก'),'offsetLeft')+1+"px";
listFrame.style.top =(getposition($('keyword'),'offsetTop')+$('keyword').clientHeight +3)+"px";
document.body.appendChild(listDiv);
document.body.appendChild(listFrame);
-
ฟังก์ชั่น setstyle (องค์ประกอบชื่อคลาส)
-
สวิตช์ (ชื่อคลาส)
-
กรณี 'm':
องค์ประกอบ.style.fontSize="12px";
element.style.fontFamily = "arial, sans-serif";
องค์ประกอบ.style.พื้นหลังสี="#3366cc";
element.style.color="สีดำ";
element.style.width=$('คำหลัก').clientWidth-2+"px";
element.style.height="20px";
องค์ประกอบ.style.padding="1px 0px 0px 2px";
ถ้า (element.displaySpan) element.displaySpan.style.color = "สีขาว"
หยุดพัก;
กรณี 'd':
องค์ประกอบ.style.fontSize="12px";
element.style.fontFamily = "arial, sans-serif";
องค์ประกอบ.style.พื้นหลังสี = "สีขาว";
element.style.color="สีดำ";
element.style.width=$('คำหลัก').clientWidth-2+"px";
element.style.height="20px";
องค์ประกอบ.style.padding="1px 0px 0px 2px";
ถ้า (element.displaySpan) element.displaySpan.style.color = "สีเขียว"
หยุดพัก;
กรณี 'ไม่':
องค์ประกอบ.style.width="80%";
ถ้า (window.navigator.userAgent.toLowerCase().indexOf("firefox")!=-1)element.style.cssFloat="ซ้าย";
อื่น element.style.styleFloat = "ซ้าย";
element.style.whiteSpace="nowrap";
องค์ประกอบ.style.overflow = "ซ่อน";
element.style.textOverflow = "จุดไข่ปลา";
องค์ประกอบ.style.fontSize="12px";
element.style.textAlign="ซ้าย";
หยุดพัก;
กรณี 'h':
องค์ประกอบ.style.width="20%";
ถ้า(window.navigator.userAgent.toLowerCase().indexOf("firefox")!=-1)element.style.cssFloat="right";
อื่น element.style.styleFloat = "ขวา";
องค์ประกอบ.style.textAlign="ขวา";
element.style.color="สีเขียว";
หยุดพัก;
-
-
ฟังก์ชั่น focusitem (ดัชนี)
-
if($('item'+lastindex)!=null)setstyle($('item'+lastindex),'d');
ถ้า($('รายการ'+ดัชนี)!=null)
-
setstyle($('รายการ'+ดัชนี), 'm');
Lastindex=ดัชนี;
-
อย่างอื่น $("คำหลัก").โฟกัส();
-
ฟังก์ชั่นการค้นหาคลิก (ดัชนี)
-
$("keyword").value=$('title'+index).innerHTML;
ธง=จริง;
-
ฟังก์ชั่นค้นหาคีย์ดาวน์ (e)
-
if($('rlist').innerHTML=='')กลับมา;
var keycode=(window.navigator.appName=="Microsoft Internet Explorer")?event.keyCode:e.ซึ่ง;
//ลง
ถ้า(รหัส==40)
-
ถ้า(lastindex==-1||lastindex==listlength-1)
-
รายการโฟกัส(0);
ค้นหาคลิก(0);
-
อื่น{
รายการโฟกัส(lastindex+1);
ค้นหาคลิก(lastindex+1);
-
-
ถ้า(รหัส==38)
-
ถ้า(lastindex==-1)
-
รายการโฟกัส(0);
ค้นหาคลิก(0);
-
อื่น{
รายการโฟกัส(lastindex-1);
ค้นหาคลิก (lastindex-1);
-
-
ถ้า(รหัส==13)
-
รายการโฟกัส (lastindex);
$("คำหลัก").value=$('title'+lastindex).innerText;
-
if(keycode==46||keycode==8){flag=false;ajaxsearch($F('keyword').substring(0,$F('keyword').length-1).Trim()); }
-
ฟังก์ชั่นแสดงผลลัพธ์ (xmlhttp)
-
ผลลัพธ์ var=unescape(xmlhttp.responseText);
ถ้า(ผลลัพธ์!=''){
var resultstring=new StringBuffer();
var title=result.split('$')[0];
var hits=result.split('$')[1];
สำหรับ(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();
สำหรับ(var j=0;j<title.split('|').length;j++)
-
setstyle($('รายการ'+j),'d');
$('item'+j).displaySpan=$('hits'+j);
setstyle($('ชื่อ'+j),'t');
setstyle($('ฮิต'+j),'h');
-
showsearch(title.split('|').length);
listlength=title.split('|').length;
ดัชนีสุดท้าย=-1;
-
อย่างอื่นที่ซ่อนการค้นหา();
-
ฟังก์ชั่น ajaxsearch (ค่า)
-
ใหม่ Ajax.Request('search.php',{method:"get",parameters:"action=do&keyword="+escape(value),onComplete:showresult});
-
ฟังก์ชั่นหลัก()
-
$('keyword').className=$('keyword').className=='inputblue'?'inputfocus':'inputblue';
if($F('keyword').Trim()=='')hiddensearch();
อื่น
-
if($F('keyword')!=''&&flag==false)ajaxsearch($F('keyword').Trim());
if(listlength!=0)$('keyword').onkeydown=searchkeydown;
อย่างอื่นที่ซ่อนการค้นหา();
-
-
ฟังก์ชั่น oninit()
-
$('keyword').autocomplete="off";
$('คำหลัก').onfocus=main;
$('คำหลัก').onkeyup=main;
$('คำหลัก').onblur=hiddensearch;
รายการสร้าง();
-
Event.observe (หน้าต่าง 'โหลด' ononit);
</script>กล่องค้นหาคัดลอกเนื้อหาไปยังรหัสคลิปบอร์ด:

<form id="form1" name="form1" method="post" action="">
<b>ป้อนคำค้นหา</b>
<input name="keyword" type="text" class="inputblue" id="keyword" maxlength="20" style="width:300px;"
</แบบฟอร์ม>