الفريق العربي للبرمجةأرشيف المنتديات · 2000 – 2023
نسخة أرشيفية للقراءة فقط — التسجيل والمشاركة مغلقان، والمحتوى محفوظ كما كان.

أريد البحث داخل Drop Down List

بدأه warning في 13 ديسمبر 2010 · 4 رد · 973 مشاهدة · في منتدى تطوير المواقع بـ PHP
مشاركة: واتساب X فيسبوك تيليجرام
#1 صاحب الموضوع

السلام عليكم ورحمة الله وبركاته ,,

لدي DropDown List , ولكن يوجد داخلها تقريبا 200 صف ..

بالتالي اريد ان اسمح للمستخدم بالكتابة داخل الدروب داون , بحيث يظهر له مباشره مايبحث عنه ,

المشكلة الثانيه , انه ربما لن يبحث بالكلمة الاولى , لنفرض مثلاً ان هذا الدروب داون يحتوي اسماء طلاب , المستخدم ربما سوف يكتب الاسم الاول وربما الاسم الثاني وربما الاخير ..

لذا اريد ان يظهر له النتائج التي يبحث عنها ..

#2

السلام عليكم،

اليك هذا الكود، واتمنى ان يساعدك. البحث يكون عن طريق الاسم الشخصي او اسم الأب او اسم العائلة...

طبعاً هنا قمت بإضافة معطيات للـ combo يدوياً، يمكنك اضافة المعطيات عن طريق قاعدة البيانات. :happy: 

<?php
  include("functions.inc");
?>
<HTML DIR=rtl>
 <HEAD>
  <META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=utf-8'>
  <meta http-Equiv="Cache-Control" Content="no-cache">
  <meta http-Equiv="Pragma" Content="no-cache">
  <meta http-Equiv="Expires" Content="0">
 </HEAD>
 <BODY dir='rtl' style='padding: 0px; margin: 0px;'>
  <div align='center'>
   <br/>
   <input type='text' onkeyup='get_class()' style='font-family:tahoma;font-size:12px;width: 218px' name='txt_class' id='txt_class' maxlength='40'/>
   <br/>
   <select onchange='' style='font-family:tahoma;font-size:12px;width: 218px' name='combo_class' id='combo_class'></select>
  </div>
 </BODY>
 <script language='JavaScript'>
 function get_class()
 {
  var srch_txt=document.getElementById('txt_class').value;
  for(var i=0;i<document.getElementById('combo_class').options.length;i++)
  {
   var tmp=document.getElementById('combo_class').options.text;
   if(tmp.search(srch_txt)>-1)
   {
    document.getElementById('combo_class').value=tmp;
    break;
   }
  }
 }
 function put_classes()
 {
  var elOptNew;
  var elSel=document.getElementById('combo_class');

  elSel.options.length=0;
  elOptNew = document.createElement('option');
  elOptNew.text ='ahmad khalil saeed';
  elOptNew.value = 'ahmad khalil saeed';
  elSel.options.add(elOptNew);

  elOptNew = document.createElement('option');
  elOptNew.text ='sami rabea';
  elOptNew.value = 'sami rabea';
  elSel.options.add(elOptNew);

  elOptNew = document.createElement('option');
  elOptNew.text ='sliman alsadek';
  elOptNew.value = 'sliman alsadek';
  elSel.options.add(elOptNew);

  elOptNew = document.createElement('option');
  elOptNew.text ='worood seef';
  elOptNew.value = 'worood seef';
  elSel.options.add(elOptNew);
 }
 put_classes();
 </script>
</HTML>
2
#3

شكرا اخي الكريم ..ردك كان جميلاً .. ولكن اولاً وهو اهم شي اريد ان تتم الكتابة داخل نفس الكومبو وليس في تكست بوكس خارجي ..

ثانياً .. حاولت تعديل الاسم الاخير اصبح الكود لا يبحث عنه ! .. ارجو المساعده ارجوكم

#4

مازلت ابحث عن الاجابه

#5

استخدام الـ jQuery autocomplete في حالة كهذه أفضل من الفكرة التي تريد العمل عليها

الكتابة داخل الـ Drop Down menu غير ممكن بحسب معلوماتي ما يمكن عمله هو كالفكرة التي وضعها لك الأخ Mohammad alsadek و إن كنت مصراً على جعل الكتابة في الـ Drop Down list

فيمكنك تعديل الكود بحيث تقوم بجعل الـ Textbox فوق الـ menu من الجانب الأيسر مثلاً

وتظهره عند الحدث onmouseover على الـ menu و بعد الكتابة ضمن الـ Textbox الذي ظهر و نقر ادخال يختفي الـ textbox مرة أخرى و تظهر القيمة المشابهة للمكتوب ضمن الـ Textbox في القائمة

ولكن كما قلت لك في فكرة كهذه من الأفضل تطبيقها على jQuery auto complete plug-in

بتوفيق الله...

Everything will be fine when we TALK LESS, DO MORE


مواضيع مشابهة