استخدم JavaScript لإنشاء مربع نص يتضمن مطالبات تلقائية ويمكن للأصدقاء الذين يحتاجون إليه الرجوع إليه. مثال 1: اكتب تنفيذ AJAX مباشرة.
عميل:
انسخ رمز الكود كما يلي:
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<أتش تي أم أل>
<الرأس>
<title>ينشئ Ajax مربع نص المطالبة التلقائي</title>
<نمط>
<!--
جسم{
عائلة الخط: Arial، Helvetica، sans-serif؛
حجم الخط: 12 بكسل؛
}
النموذج {الحشو: 0 بكسل؛ الهامش: 0 بكسل؛}
مدخل{
/* نمط مربع إدخال المستخدم */
عائلة الخط: Arial، Helvetica، sans-serif؛
حجم الخط: 12 بكسل الحدود: 1 بكسل الصلبة #000000؛
العرض: 200 بكسل؛ الحشو: 1 بكسل؛
}
#يظهر فجأة{
/* نمط كتلة div لمربع المطالبة */
الموضع: العرض المطلق: 202 بكسل؛
اللون:#004a7e;حجم الخط:12px;
عائلة الخط: Arial، Helvetica، sans-serif؛
اليسار: 41 بكسل؛ الأعلى: 25 بكسل؛
}
#المنبثقة.عرض{
/* عرض حدود مربع المطالبة */
الحدود: 1 بكسل #004a7e؛
}
#منبثقة.إخفاء{
/*إخفاء حدود مربع المطالبة*/
الحدود: لا شيء؛
}
/* نمط صندوق المطالبة*/
أول {
نمط القائمة: لا شيء؛
الهامش: 0 بكسل؛
}
لى.ماوسوفر{
لون الخلفية:#004a7e;
اللون: #FFFFFF؛
}
لى.ماوس خارج{
لون الخلفية:#FFFFFF;
اللون:#004a7e؛
}
-->
</نمط>
<لغة البرنامج النصي=جافا سكريبت>
var oInputField; // مع الأخذ في الاعتبار أنه يتم استخدامه في العديد من الوظائف
var oPopDiv; // لذلك فهو في شكل متغير عام
فار oColorsUl;
فار xmlHttp;
وظيفة createXMLHttpRequest(){
إذا (window.ActiveXObject)
xmlHttp = new ActiveXObject(Microsoft.XMLHTTP);
وإلا إذا (window.XMLHttpRequest)
xmlHttp = new XMLHttpRequest();
}
الدالة initVars(){
// تهيئة المتغيرات
oInputField = document.forms[myForm1].colors;
oPopDiv = document.getElementById(popup);
oColorsUl = document.getElementById(colors_ul);
}
وظيفة واضحة الألوان () {
// امسح محتوى المطالبة
for(var i=oColorsUl.childNodes.length-1;i>=0;i--)
oColorsUl.removeChild(oColorsUl.childNodes[i]);
oPopDiv.className = إخفاء؛
}
الدالة setColors(the_colors){
// عرض مربع مطالبة، والمعلمة التي تم تمريرها عبارة عن مصفوفة مكونة من النتائج المطابقة.
ClearColors(); // في كل مرة تقوم فيها بإدخال حرف، قم بمسح الموجه الأصلي قبل المتابعة.
oPopDiv.className = show;
فار أولي؛
for(var i=0;i<the_colors.length;i++){
// عرض النتائج السريعة المطابقة للمستخدم واحدًا تلو الآخر
oLi = document.createElement(li);
oColorsUl.appendChild(oLi);
oLi.appendChild(document.createTextNode(the_colors[i]));
oLi.onmouseover = function(){
this.className = mouseOver; // قم بالتمييز عند مرور الماوس
}
oLi.onmouseout = function(){
this.className = mouseOut; // استعادة الحالة الأصلية عند المغادرة
}
oLi.onclick = function(){
// عندما ينقر المستخدم على عنصر مطابق، اضبط مربع الإدخال على قيمة العنصر
oInputField.value = this.firstChild.nodeValue;
ClearColors(); // امسح مربع المطالبة في نفس الوقت
}
}
}
وظيفة البحث عن الألوان () {
initVars(); // تهيئة المتغيرات
إذا (oInputField.value.length > 0){
createXMLHttpRequest(); // أرسل إدخال المستخدم إلى الخادم
var sUrl = 9-10.aspx?sColor= + oInputField.value + ×tamp= + new Date().getTime();
xmlHttp.open(GET,sUrl,true);
xmlHttp.onreadystatechange = function(){
إذا (xmlHttp.readyState == 4 && xmlHttp.status == 200){
var aResult = new Array();
إذا (xmlHttp.responseText.length){
aResult = xmlHttp.responseText.split(,);
setColors(aResult); // عرض نتائج الخادم
}
آخر
ClearColors();
}
}
xmlHttp.send(null);
}
آخر
ClearColors(); // امسح مربع المطالبة عندما لا يكون هناك إدخال (على سبيل المثال، يضغط المستخدم على مفتاح del)
}
</script>
</الرأس>
<الجسم>
<طريقة النموذج=اسم النشر=myForm1>
اللون: <نوع الإدخال=اسم النص=معرف الألوان=الألوان onkeyup=findColors() />
</النموذج>
<معرف div=المنبثقة>
<ul id=colors_ul></ul>
</div>
</الجسم>
</html>
جانب الخادم (9-10.aspx):
انسخ رمز الكود كما يلي:
<%@ لغة الصفحة=C# ContentType=text/html ResponseEncoding=gb2312 %>
<%@ استيراد مساحة الاسم=System.Data %>
<%
Response.CacheControl = no-cache;
Response.AddHeader(Pragma,no-cache);
string sInput = Request[sColor].Trim();
إذا (sInput.Length == 0)
يعود؛
نتيجة السلسلة = ;
string[] aColors = new سلسلة [] {أليس بلو، عتيق، زبرجد، أزور، بيج، بيسك، أسود، اللوز الأبيض، الأزرق، الأزرق البنفسجي، النحاس، البرونز، البني، بورليوود، كاديت بلو، شارتروز، شوكولاتة، نحاس، مرجاني، زهرة الذرة. لو، حرير الذرة، سماوي، أزرق داكن، سماوي داكن، ذهبي داكن، رمادي داكن، أخضر داكن، داكن، أرجواني داكن، أخضر داكن، أخضر داكن، داكن، داكن، أحمر داكن، سالمون داكن، أخضر بحري داكن، أزرق داكن، داكن رمادي، فيروزي داكن، بنفسجي داكن، ديب بينك، ديبسكي بلو، ديمجراي، دودجير بلو، الفلسبار، الطوب الناري، فلورال وايت، فورست جرين، فوشيا، جينسبورو، ذهبي، جولدنرود، جولينرود، جوست وايت، رمادي، أخضر، جريني أصفر، ندوة العسل، وردي ساخن، أحمر هندي، إينين، عاجي، كاكي، لافندر، لافندر أحمر الخدود، لون جرين، ليمون شيفون، أزرق فاتح، مرجاني فاتح، سماوي فاتح، لايت جودينرود، لايت جودين رودييلو، رمادي فاتح، أخضر فاتح، l وردي فاتح، سلمون فاتح، أخضر بحري، أزرق سماوي فاتح، أزرق فاتح، رمادي فاتح، أزرق فاتح، أصفر فاتح، ليموني، أخضر ليموني، أرجواني، أرجواني، ماروم، كستنائي، زبرجد متوسط، أزرق متوسط، متوسط أوموركيد، بوربول متوسط، أخضر بحري متوسط، أزرق أردوازي متوسط، أخضر ربيعي متوسط، تركواز متوسط، أحمر بنفسجي متوسط، أزرق منتصف الليل، كريم النعناع، ميستيروز، موكاسين، نافاجو وايت، كحلي، أزرق داكن، دانتيل قديم، أولي vedrab، برتقالي، أوركيد، أورانجيرد، Palegodenrod، Palegreen، Paleturquoise، Palevioletred، Papayawhip، Peachpuff، بيرو، وردي، برقوق، مسحوق أزرق، أرجواني، كوارتز، أحمر، بني وردي، أزرق ملكي، بني سادل، سال مون، ساندي براون، سكارليت، سيجرين، صدف، سيينا، فضي، أزرق سماوي، رمادي أردوازي، ثلجي، سبرينج جرين، ستيل بلو، أسمر، شوك، طماطم، فيروزي، بنفسجي، بنفسجي أحمر، قمح، دخان أبيض، أصفر، أصفر أخضر}؛
for(int i=0;i<aColors.Length;i++){
إذا (aColors[i].IndexOf(sInput) == 0)
sResult += aColors[i] + ,;
}
if(sResult.Length>0) //إذا كان هناك تطابق
sResult = sResult.Substring(0,sResult.Length-1); // إزالة الرقم الأخير
Response.Write(sResult);
%>
المثال 2: تم التنفيذ باستخدام jQuery.
عميل:
انسخ رمز الكود كما يلي:
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<أتش تي أم أل>
<الرأس>
<title>ينفذ JQuery مربع نص المطالبة التلقائي</title>
<نمط>
<!--
جسم{
عائلة الخط: Arial، Helvetica، sans-serif؛
حجم الخط: 12 بكسل؛
}
النموذج {الحشو: 0 بكسل؛ الهامش: 0 بكسل؛}
مدخل{
/* نمط مربع إدخال المستخدم */
عائلة الخط: Arial، Helvetica، sans-serif؛
حجم الخط: 12 بكسل الحدود: 1 بكسل الصلبة #000000؛
العرض: 200 بكسل؛ الحشو: 1 بكسل؛
}
#يظهر فجأة{
/* نمط كتلة div لمربع المطالبة */
الموضع: العرض المطلق: 202 بكسل؛
اللون:#004a7e;حجم الخط:12px;
عائلة الخط: Arial، Helvetica، sans-serif؛
اليسار: 41 بكسل؛ الأعلى: 25 بكسل؛
}
#المنبثقة.عرض{
/* عرض حدود مربع المطالبة */
الحدود: 1 بكسل #004a7e؛
}
/* نمط صندوق المطالبة*/
أول {
نمط القائمة: لا شيء؛
الهامش: 0 بكسل؛
اللون:#004a7e؛
}
لى.ماوسوفر{
لون الخلفية:#004a7e;
اللون: #FFFFFF؛
}
-->
</نمط>
<script language=javascript src=jquery.min.js></script>
<لغة البرنامج النصي=جافا سكريبت>
var oInputField; // مع الأخذ في الاعتبار أنه يتم استخدامه في العديد من الوظائف
var oPopDiv; // لذلك فهو في شكل متغير عام
فار oColorsUl;
الدالة initVars(){
// تهيئة المتغيرات
oInputField = $(#colors);
oPopDiv = $(#popup);
oColorsUl = $(#colors_ul);
}
وظيفة واضحة الألوان () {
// امسح محتوى المطالبة
oColorsUl.empty();
oPopDiv.removeClass(show);
}
الدالة setColors(the_colors){
// عرض مربع مطالبة، والمعلمة التي تم تمريرها عبارة عن مصفوفة مكونة من النتائج المطابقة.
ClearColors(); // في كل مرة تقوم فيها بإدخال حرف، قم بمسح الموجه الأصلي قبل المتابعة.
oPopDiv.addClass(show);
for(var i=0;i<the_colors.length;i++)
// عرض النتائج السريعة المطابقة للمستخدم واحدًا تلو الآخر
oColorsUl.append($(<li>+the_colors[i]+</li>));
oColorsUl.find(li).click(function(){
oInputField.val($(this).text());
ClearColors();
}).hover(
وظيفة(){$(هذا).addClass(mouseOver);},
وظيفة () {$ (هذا).removeClass (mouseOver)؛}
);
}
وظيفة البحث عن الألوان () {
initVars(); // تهيئة المتغيرات
إذا (oInputField.val().length > 0){
// احصل على بيانات غير متزامنة
$.get(14-10.aspx,{sColor:oInputField.val()},
وظيفة (البيانات) {
var aResult = new Array();
إذا (طول البيانات > 0){
النتيجة = data.split(,);
setColors(aResult); // عرض نتائج الخادم
}
آخر
ClearColors();
});
}
آخر
ClearColors(); // امسح مربع المطالبة عندما لا يكون هناك إدخال (على سبيل المثال، يضغط المستخدم على مفتاح del)
}
</script>
</الرأس>
<الجسم>
<طريقة النموذج=اسم النشر=myForm1>
اللون: <نوع الإدخال=اسم النص=معرف الألوان=الألوان onkeyup=findColors() />
</النموذج>
<معرف div=المنبثقة>
<ul id=colors_ul></ul>
</div>
</الجسم>
</html>
جانب الخادم (14-10.aspx):
انسخ رمز الكود كما يلي:
<%@ لغة الصفحة=C# ContentType=text/html ResponseEncoding=gb2312 %>
<%@ استيراد مساحة الاسم=System.Data %>
<%
Response.CacheControl = no-cache;
Response.AddHeader(Pragma,no-cache);
string sInput = Request[sColor].Trim();
إذا (sInput.Length == 0)
يعود؛
نتيجة السلسلة = ;
سلسلة [] aColors = جديد سلسلة [] {أليس بلو، عتيق، زبرجد، أزور، بيج، بيسك، أسود، اللوز الأبيض، الأزرق، الأزرق البنفسجي، النحاس، البرونز، البني، بورليوود، كاديت بلو، شارتروز، شوكولاتة، نحاس، مرجاني، زهرة الذرة. لو، حرير الذرة، سماوي، أزرق داكن، سماوي داكن، ذهبي داكن، رمادي داكن، أخضر داكن، داكن، أرجواني داكن، أخضر داكن، أخضر داكن، داكن، داكن، أحمر داكن، سالمون داكن، أخضر بحري داكن، أزرق داكن، داكن رمادي، فيروزي داكن، بنفسجي داكن، ديب بينك، ديبسكي بلو، ديمجراي، دودجير بلو، الفلسبار، الطوب الناري، فلورال وايت، فورست جرين، فوشيا، جينسبورو، ذهبي، جولدنرود، جولينرود، جوست وايت، رمادي، أخضر، جريني أصفر، ندوة العسل، وردي ساخن، أحمر هندي، إينين، عاجي، كاكي، لافندر، لافندر أحمر الخدود، لون جرين، ليمون شيفون، أزرق فاتح، مرجاني فاتح، سماوي فاتح، لايت جودينرود، لايت جودين رودييلو، رمادي فاتح، أخضر فاتح، l وردي فاتح، سلمون فاتح، أخضر بحري، أزرق سماوي فاتح، أزرق فاتح، رمادي فاتح، أزرق فاتح، أصفر فاتح، ليموني، أخضر ليموني، أرجواني، أرجواني، ماروم، كستنائي، زبرجد متوسط، أزرق متوسط، متوسط أوموركيد، بوربول متوسط، أخضر بحري متوسط، أزرق أردوازي متوسط، أخضر ربيعي متوسط، تركواز متوسط، أحمر بنفسجي متوسط، أزرق منتصف الليل، كريم النعناع، ميستيروز، موكاسين، نافاجو وايت، كحلي، أزرق داكن، دانتيل قديم، أولي vedrab، برتقالي، أوركيد، أورانجيرد، Palegodenrod، Palegreen، Paleturquoise، Palevioletred، Papayawhip، Peachpuff، بيرو، وردي، برقوق، مسحوق أزرق، أرجواني، كوارتز، أحمر، بني وردي، أزرق ملكي، بني سادل، سال مون، ساندي براون، سكارليت، سيجرين، صدف، سيينا، فضي، أزرق سماوي، رمادي أردوازي، ثلجي، سبرينج جرين، ستيل بلو، أسمر، شوك، طماطم، فيروزي، بنفسجي، بنفسجي أحمر، قمح، دخان أبيض، أصفر، أصفر أخضر}؛
for(int i=0;i<aColors.Length;i++){
إذا (aColors[i].IndexOf(sInput) == 0)
sResult += aColors[i] + ,;
}
if(sResult.Length>0) //إذا كان هناك تطابق
sResult = sResult.Substring(0,sResult.Length-1); // إزالة الرقم الأخير
Response.Write(sResult);
%>