1. قم بتنزيل jquery-latest.js وJSuggest.js وJSuggest.css
الكود المصدري لـ JSuggest.js هو كما يلي
انسخ رمز الكود كما يلي:
/**
*
* الوصف: مربع المطالبة المنسدل JSuggest
*/
وظيفة JSuggest () {
// مربع القائمة المنسدلة DIV
this.div = null;
//ul ضمن DIV
this.ul = null;
//مربع إدخال النص
this.input = null;
// كائن LI محدد بواسطة DIV الحالي
this.current_li = null;
/**
* إخفاء مربع المطالبة المنسدلة
*/
هذا.إخفاء = وظيفة(){
this.div.style.visibility = "مخفي";
}
/**
* إظهار مربع المطالبة المنسدل
*/
هذا.عرض = وظيفة () {
this.div.style.visibility = "visible";
}
/**
* حالة مربع المطالبة المنسدلة
*/
this.status = function(){
إذا (this.div.style.visibility == "مرئي"){
عودة صحيحة؛
}
عودة كاذبة.
}
/**
* قم بتعيين LI المحدد بواسطة DIV الحالي
*/
this.setCurrent_li = function(li, obj){
var co = obj.current_li;
إذا (المشاركة!= فارغة){
co.className = "";
}
li.className = "li_index";
obj.current_li = li;
}
/**
* تهيئة اقتراح
*
* input_id: معرف مربع الإدخال
* defHeight: ارتفاع مربع المطالبة المنسدل (لا يمكنك أيضًا توفيره)
*/
this.init = function(input_id, defHeight){
this.input = document.getElementById(input_id);
//this.input.autocomplete = "off";
var left = this.input.offsetLeft;
var top = this.input.offsetTop;
var width = this.input.offsetWidth;
var height = this.input.offsetHeight;
var p=this.input.offsetParent;
بينما (ع! = فارغة) {
left+=p.offsetLeft;
top+=p.offsetTop;
p=p.offsetParent;
}
أعلى+= الارتفاع؛
إذا (defHeight==null || defHeight==0){
الارتفاع = 150؛
}آخر{
height = defHeight;
}
this.input.value = "";
فار obj = هذا؛
this.input.onkeydown = function(evt){
obj.onkeydown(evt, obj);
}
this.div = document.createElement("div");
this.div.style.width = width + "px";
this.div.style.height = height + "px";
this.div.style.left = left + "px";
this.div.style.top = top + "px";
this.ul = document.createElement("ul");
this.div.appendChild(this.ul);
this.div.className = "jsuggest";
document.body.appendChild(this.div);
}
/**
* إزالة كافة LI في UL تحت DIV
*/
هذا.إزالة = وظيفة () {
this.current_li = null;
while(this.removeLI());
}
/**
* إزالة LI في UL تحت DIV
*/
this.removeLI = function(){
var العقدة = this.ul.childNodes;
ل(فار ن في العقدة){
إذا (node[n] != null && العقدة[n].nodeName == "LI"){
// تنبيه (عقدة [ن].innerHTML)؛
this.ul.removeChild(node[n]);
عودة صحيحة؛
}
}
عودة كاذبة.
}
/**
* إنشاء LI في DIV
*/
هذا.إنشاء = وظيفة(العناصر){
this.remove();
var li_item = items.split("،");
ل(فار أنا في li_item){
// تنبيه (li_item[i])؛
var li = document.createElement("li");
li.innerHTML = li_item[i];
فار obj = هذا؛
li.onmousedown = function(){
obj.onmousedown(this, obj);
}
li.onmouseover = this.onmouseover;
li.onmouseout = this.onmouseout;
this.ul.appendChild(li);
}
this.show();
}
/**
* حدث الضغط على مربع النص
*/
this.onkeydown = function(evt, obj){
إذا (!obj.status()){
عودة كاذبة.
}
إذا (!evt && window.event)
{
evt = window.event;
}
var key = evt.keyCode;
//فار KEYUP = 38؛
//فار KEYDOWN = 40؛
//فار مفتاح = 13؛
var ob = obj;
إذا (مفتاح == 38){
obj.upKeySelected();
}إلا إذا (مفتاح == 40){
obj.downKeySelected();
}آخر إذا (مفتاح == 13 || مفتاح == 27){
obj.hide();
}
}
this.getCurrentLiIndex = function(){
إذا (this.current_li == null){
العودة -1؛
}
var العقدة = this.ul.childNodes;
ل(فار ن في العقدة){
إذا (node[n].nodeName == "LI"){
إذا (عقدة [ن] == this.current_li){
العودة ن؛
}
}
}
}
this.getLi = وظيفة(الفهرس){
var العقدة = this.ul.childNodes;
ل(فار ن في العقدة){
إذا (node[n].nodeName == "LI" && n == Index){
this.setCurrent_li(node[n], this);
عقدة العودة [ن]؛
}
}
}
this.upKeySelected = function(){
var num = this.getCurrentLiIndex();
إذا (رقم != -1 && رقم > 0){
الأسطوانات--؛
var العقدة = this.getLi(num);
this.setCurrent_li(node, this);
this.input.value =node.innerHTML;
}
}
this.downKeySelected = function(obj){
var num = this.getCurrentLiIndex();
إذا (عدد == -1){
الأعداد = 0؛
}آخر {
رقم++;
if (num >= this.ul.childNodes.length)return false;
}
var العقدة = this.getLi(num);
this.setCurrent_li(node, this);
this.input.value =node.innerHTML;
}
/**
* حدث الضغط بالماوس DIV
*/
this.onmousedown = function(thiz, obj){
obj.setCurrent_li(thiz, obj);
obj.input.value = thiz.innerHTML;
obj.hide();
}
/**
* حدث حركة الماوس DIV
*/
this.onmouseover = function(){
إذا (this.className != "li_index"){
this.className = "li_check";
}
}
/**
* حدث إخراج DIV للماوس
*/
this.onmouseout = function(){
إذا (this.className == "li_check"){
this.className = "";
}
}
}
var jsuggest = new JSuggest();
صفحة 2.jsp
انسخ رمز الكود كما يلي:
<input id = "text" name = "text" type = "text" onkeyup = "go (event، this.value)؛"/>
<نوع البرنامج النصي = "نص/جافا سكريبت">
ي(مستند).جاهز(وظيفة(){
// تهيئة JSUGGEST
jsuggest.init("نص");
// أو استخدم الطريقة التالية لتعيين ارتفاع المربع المنسدل
//jsuggest.init("text",200);
})
وظيفة الذهاب (الحدث، القيمة) {
حدث = حدث ? حدث : (window.event ? window.event : الوسيطات[0]);
var url = "url?suggestInput="+encodeURIComponent(value);//url هو إجراء محدد أو عنوان jsp، وما إلى ذلك، والقيمة المرجعة عبارة عن سلسلة مفصولة بفواصل
goSuggestInput(event,url,value);
}
الدالة goSuggestInput(evnet,url,value){
إذا (القيمة == ""){
// إخفاء المربع المنسدل إذا كان مربع الإدخال فارغًا
jsuggest.hide();
عودة كاذبة.
}
// تأكد من أن evt حدث صالح
إذا (!evnet && window.event)
{
evnet = window.event;
}
مفتاح فار = evnet.keyCode;
إذا (مفتاح == 38 || مفتاح == 40 || مفتاح == 13 || مفتاح == 27){
عودة كاذبة.
}
ي.اجاكس({
النوع: "منشور"،
عنوان URL: عنوان URL،
نوع البيانات: "نص"،
ذاكرة التخزين المؤقت: "خطأ"،
قبل الإرسال: الوظيفة(XMLHttpRequest){
},
النجاح: الوظيفة (البيانات، حالة النص) {
// أضف البيانات إلى المربع المنسدل
jsuggest.create(data);
},
كاملة: وظيفة (XMLHttpRequest، textStatus) {
},
خطأ: وظيفة () {
تنبيه("عذرًا، الخادم مشغول!");
}
});
}
</script>