جدول قاعدة البيانات: نسخ المحتوى إلى كود الحافظة:
CREATE TABLE `xqbar`.`suggest` (
`المعرف` INT ليس NULL AUTO_INCREMENT،
`العنوان` VARCHAR( 100 ) ليس فارغًا،
`الزيارات` INT ليست فارغة افتراضيًا '0'،
المفتاح الأساسي (`المعرف`)
) المحرك =
أدخل InnoDB في القيم المقترحة (العنوان، الزيارات) ('xqbar.com'،100)؛
أدخل في القيم المقترحة (العنوان، الزيارات) ('www.xqbar.com'،410)؛
أدخل في القيم المقترحة (العنوان، الزيارات) ('http://xqbar.com'،700)؛
أدخل في القيم المقترحة (العنوان، الزيارات) ('mail:xqbar.com'،200)؛
أدخل في القيم المقترحة (العنوان، الزيارات) ('ftp:xqbar.com'،100)؛
أدخل في قيم الاقتراح (العنوان، الزيارات) ('http://www.xqbar.com'،70)search.php
(لم أتعرض لـ PHP منذ فترة طويلة. إذا كانت لغة PHP أدناه مليئة بالألفاظ، فأنا أرغب في الحصول على بعض النصائح من أحد الخبراء)
يجب أن تكون سلسلة المعلومات التي تم إرجاعها xxx1|xxx2$200|100. محتوى النسخة المقابل إلى رمز الحافظة قبل وبعد:
<?php
إذا($_GET["action"]!=''){
# احصل على الكلمات الرئيسية التي أدخلها المستخدم
$keyword=$_GET["keyword"];
#تصفية الكلمات الرئيسية
$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,الزيارات من اقتراح مكان العنوان مثل '%".$keyword."%' الترتيب حسب عدد مرات الوصول إلى الحد التنازلي 10";
$result=mysql_query($sql);
#Loop للحصول على نتائج الاستعلام وإرجاع سلسلة
# التنسيق هو النتيجة 1|النتيجة 2$عدد النقرات على النتيجة 1|عدد النقرات على النتيجة 2
إذا(نتيجة $){
$i=1;$title='';$his='';
بينما($row=mysql_fetch_array($result,MYSQL_BOTH))
{
$title=$title.$row['title'];
$hits=$hits.$row['hits'];
إذا($i<mysql_num_rows($result))
{
$title=$title."|";
$الزيارات=$الزيارات."|";
}
$i++;
}
}
mysql_Close();
}
?>
<?php echo $title.'$'.$hits;?>رمز js لنسخ المحتوى إلى رمز الحافظة:
بعد تقديم prototye.js، قال بعض الأصدقاء أن هذه المكتبة كبيرة جدًا، أو أنه إذا لم تكن معتادًا عليها، فيمكنك استخدام إطار عمل jquery.js أو إنشاء كائن ajax مباشرةً هنا أقتبس مباشرة إطار عمل prototye.js.
<script type="text/javascript" src="prototype.js"></script>
رمز JS لإنشاء الطبقات وعرض نتائج الاستعلام
<نوع البرنامج النصي = "نص/جافا سكريبت">
// حدد المتغير lastindex لتمثيل الموضع الذي ينزلق فيه الماوس على نتيجة الاستعلام، في البداية -1
فار lastindex=-1;
// حدد علامة المتغير للإشارة إلى ما إذا كان سيتم إجراء استعلام ajax بناءً على الكلمات الرئيسية التي أدخلها المستخدم. يعني الخطأ أن الاستعلام مسموح به وأن الاستعلام الحقيقي محظور.
فار العلم=خطأ;
// طول المصفوفة التي تم إنشاؤها بواسطة نتائج الاستعلام التي تم إرجاعها
فار قائمة الطول=0;
// أنشئ سلسلة مخصصة لتحسين الكفاءة
الدالة StringBuffer(){this.data=[];}
//تكليف
StringBuffer.prototype.append=function(){this.data.push(arguments[0]);return this;}
//الإخراج
StringBuffer.prototype.tostring=function(){return this.data.join("");}
// قم بإزالة المسافات على جانبي السلسلة
String.prototype.Trim = function(){return this.replace(/(^s*)|(s*$)/g, "");}
// الوظيفة المخفية هي بشكل أساسي إخفاء الطبقة المنسدلة المعروضة وiframe.
وظيفة البحث المخفي ()
{
$('rlist').style.display="none";
$('rFrame').style.display="none";
}
// تعرض وظيفة العرض بشكل أساسي الطبقة المنسدلة للمطالبة ومعلمة iframe num. وفقًا لهذه المعلمة، يتم التحكم في ارتفاع طبقة المطالبة وإطار iframe المراد عرضهما.
وظيفة عرض البحث (رقم)
{
$('rlist').style.display='';
$('rFrame').style.display='';
// هنا أقوم بتعريف الارتفاع الفوري لكل نتيجة استعلام يتم إرجاعها بـ 20 بكسل، ويتم إضافة الارتفاع الإجمالي لطبقة المطالبة إلى الأسطوانات لأنني استخدمت الحشو بمقدار بكسل واحد عند تحديد النمط.
$('rlist').style.height=num*20+num+'px';
// حدد أيضًا ارتفاع إطار iframe
$('rFrame').style.height=num*20+num+'px';
}
// إرجاع وظيفة الإحداثيات لمربع إدخال النص. عنصر المعلمة هو الكائن الذي سيتم إرجاعه. يمكن إزاحة المعلمة من اليسار | OffsetTop، والتي تمثل على التوالي الموضع المطلق للكائن من الزاوية العلوية للنافذة اليسرى.
//www.devdao.com استخدم هذه الوظيفة لتحديد طبقة المطالبة التي نريد عرضها، بحيث يتم عرض طبقة المطالبة بشكل صحيح أسفل مربع إدخال النص
وظيفة getposition (العنصر، الإزاحة)
{
فار ج=0;
بينما (العنصر)
{
c+=element[offset];
element=element.offsetParent
}
العودة ج؛
}
// تتضمن وظيفة إنشاء طبقة المطالبة طبقة المطالبة، ومن أجل تجنب ظهور مربع التحديد المنسدل أسفل مربع إدخال النص، لم تعد طبقة المطالبة الخاصة بنا قادرة على تحديد إطار iframe فوقه.
// يمكن أن نفهم أنه عندما يكون هناك مربع تحديد منسدل أسفل مربع إدخال النص، فهو يمثل طبقة مطالبة مربع iframe المنسدلة من الأسفل إلى الأعلى.
قائمة إنشاء الوظيفة ()
{
// إنشاء طبقة سريعة
var listDiv=document.createElement("div");
// معرف الطبقة السريعة
listDiv.id="rlist";
listDiv.style.zIndex="2";
listDiv.style.position="absolute";
listDiv.style.border="solid 1px #000000";
listDiv.style.backgroundColor="#FFFFFF";
listDiv.style.display="none";
listDiv.style.width=$('keyword').clientWidth+"px";
listDiv.style.left=getposition($('keyword'),'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="absolute";
listFrame.style.border="0";
listFrame.style.display="none";
listFrame.style.width=$('keyword').clientWidth+"px";
listFrame.style.left=getposition($('keyword'),'offsetLeft')+1+"px";
listFrame.style.top =(getposition($('keyword'),'offsetTop')+$('keyword').clientHeight +3)+"px";
document.body.appendChild(listDiv);
document.body.appendChild(listFrame);
}
نمط تعيين الوظيفة (العنصر، اسم الفئة)
{
التبديل (اسم الفئة)
{
الحالة "م":
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";
إذا (element.displaySpan)element.displaySpan.style.color = "أبيض"
استراحة؛
الحالة "د":
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";
إذا (element.displaySpan)element.displaySpan.style.color = "أخضر"
استراحة؛
الحالة "ر":
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";
استراحة؛
الحالة "ح":
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';
استراحة؛
}
}
عنصر التركيز الوظيفي (الفهرس)
{
if($('item'+lastindex)!=null)setstyle($('item'+lastindex),'d');
إذا($('العنصر'+الفهرس)!=فارغة)
{
setstyle($('item'+index), 'm');
lastindex=index;
}
آخر $("الكلمة الرئيسية").focus();
}
البحث عن وظيفةانقر(الفهرس)
{
$("الكلمة الرئيسية").value=$('title'+index).innerHTML;
العلم = صحيح؛
}
وظيفة البحث عن المفتاح (هـ)
{
if($('rlist').innerHTML=='')return;
var keycode=(window.navigator.appName=="Microsoft Internet Explorer")?event.keyCode:e.what;
//تحت
إذا (رمز المفتاح==40)
{
إذا (lastindex==-1||lastindex==listlength-1)
{
عنصر التركيز(0);
بحثنقرة(0);
}
آخر{
Focusitem(lastindex+1);
Searchclick(lastindex+1);
}
}
إذا (رمز المفتاح==38)
{
إذا (لاستيندكس ==-1)
{
عنصر التركيز(0);
بحثنقرة(0);
}
آخر{
عنصر التركيز(lastindex-1);
Searchclick(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 result=unescape(xmlhttp.responseText);
إذا (النتيجة!=''){
var resultstring=new StringBuffer();
var title=result.split('$')[0];
var hits=result.split('$')[1];
for(var i=0;i<title.split('|').length;i++)
{
resultsstring.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;
}
آخر Hiddensearch();
}
وظيفة اياكسسيرتش (القيمة)
{
new 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;
آخر Hiddensearch();
}
}
وظيفة أونينيت ()
{
$('الكلمة الرئيسية').الإكمال التلقائي='off';
$('الكلمة الرئيسية').onfocus=main;
$('الكلمة الرئيسية').onkeyup=main;
$('الكلمة الرئيسية').onblur=hiddensearch;
createlist();
}
Event.observe(window,'load',oninit);
</script>نسخ محتوى مربع البحث إلى كود الحافظة:
<form id="form1" name="form1" Method="post" action="">
<b>أدخل كلمات البحث الرئيسية</b>
<اسم الإدخال = "الكلمة الرئيسية" type = "text" class = "inputblue" id = "الكلمة الرئيسية" maxlength = "20" style = "width:300px؛ />".
</النموذج>