Select_Box add a search

html/js/scripts.js

@@ -2157,7 +2157,49 @@ function filter_table(phrase, _id, colnr, start_row) {
         }
     }
 }
+/**
+ * @brief filter quickly a list
+ * @param  phrase : DOM id of the input text where we find the word to seach
+ * @param  _id : id of the list
+ * @returns nothing
+ * @see HtmlInput::filter_list
+ */
+function filter_list(phrase, _id) {
+    $('info_div').innerHTML = content[65];
+    $('info_div').style.display = "block";
+    var words = $(phrase).value.toLowerCase();
+    var l_list = document.getElementById(_id);
 
+    var ele;
+    var tot_found = 0;
+
+    for (var r = 0; r < l_list.childNodes.length; r++) {
+        var found = 0;
+        if ( l_list.childNodes[r].childElementCount == 0 )
+        {
+            ele = l_list.childNodes[r].innerHTML;
+        } else {
+               ele = l_list.childNodes[r].childNodes[0].innerHTML;
+        }
+        if ( ele.toLowerCase().indexOf(words) >= 0) {
+            tot_found++;
+            l_list.childNodes[r].style.display='block';
+        } else {
+            l_list.childNodes[r].style.display='none';
+        }
+        $('info_div').style.display = "none";
+        $('info_div').innerHTML = "";
+    }
+    if (tot_found == 0) {
+        if ($('info_' + _id)) {
+            $('info_' + _id).innerHTML = content[69]
+        }
+    } else {
+        if ($('info_' + _id)) {
+            $('info_' + _id).innerHTML = "  ";
+        }
+    }
+}
 /**
  * @brief
  * Display the task late or for today in dashboard

include/lib/html_input.class.php

@@ -975,6 +975,21 @@ class HtmlInput
         $r.=' <span class="notice" id="info_'.$p_table_id.'"></span>';
         return $r;
     }
+    /**
+     * Display a field for searching an element in a list 
+     * @param string $p_list_id DOM ID of the list (ul or ol)
+     * @return string
+     */
+    static function filter_list($p_list_id)
+    {
+        $r="<span>";
+        $r.=sprintf('<input id="search_%s" type="TEXT" class="input_text" name="filter_list%s" onkeyup="filter_list(this,\'%s\')">',
+                $p_list_id,$p_list_id,$p_list_id);
+        
+        $r.=sprintf('<input type="button" class="smallbutton" onclick="$(\'search_%s\').value=\'\';filter_list(this,\'%s\')">',$p_list_id,$p_list_id);
+        $r.='</span>';
+        return $r;
+    }
 
     static function show_reconcile($p_div, $let, $span="")
     {

include/lib/select_box.class.php

@@ -34,6 +34,7 @@ class Select_Box
     var $id;
     var $item;
     private $cnt;
+    private $filter; //!< allow a dynamic not case sensitive search
     var $default_value;
 
     /**
@@ -50,22 +51,27 @@ class Select_Box
         $this->cnt=0;
         $this->default_value=-1;
         $this->style_box="";
+	$this->filter="";
     }
 
     function input()
     {
+        $list_id=sprintf('%s_list',$this->id);
+        
         // Show when click
         $javascript=sprintf('$("%s_bt").onclick=function() {
 	try {
            var newDiv=$("select_box%s");
 	   var pos=$("%s_bt").cumulativeOffset();
            newDiv.setStyle({display:"block",position:"fixed",top:pos.top+25+"px",left:pos.left+5+"px"});
+         
+           if ( $("search_%s") ) { $("search_%s").focus();}
 
 	} catch(e) {
 	     alert(e.message);
 	}
        }
-        ', $this->id, $this->id, $this->id, $this->id);
+        ', $this->id, $this->id, $this->id, $list_id,$list_id);
         
         // Hide when out of the zone
         $javascript.=sprintf('$("select_box%s").onmouseleave=function() {
@@ -85,9 +91,14 @@ class Select_Box
         printf('<div class="select_box" id="select_box%s" style="%s">',
                 $this->id, $this->style_box);
 
-
+	// Show the filter if there is one, 
+	if ( $this->filter != "" ) {
+            echo $this->filter;
+	  echo HtmlInput::filter_list($list_id);
+	}
+        
         // Print the list of possible options
-        printf('<ul id="%s_list">',$this->id);
+        printf('<ul id="%s">',$list_id);
         for ($i=0; $i<count($this->item); $i++)
         {
             if ($this->item[$i]['type']=="url")
@@ -162,5 +173,12 @@ class Select_Box
         $this->item[$this->cnt]['type']='input';
         $this->cnt++;
     }
+    function set_filter($p_filter)
+    {
+      $this->filter=$p_filter;
+    }
+    function get_filter() {
+      return $this->filter;
+    }
 
 }

scenario/select-box-test.php

@@ -46,7 +46,7 @@ div.select_box a:hover,div.select_box ul li:hover {
         </p>
         <p style="float : static">
   <?php
-     require NOALYSS_INCLUDE.'/lib/select_box.class.php';
+     require_once NOALYSS_INCLUDE.'/lib/select_box.class.php';
      $a=new Select_Box("test","click me !");
      $a->add_url("List (link)","?id=5&".Dossier::get());
      $a->add_javascript("Hello (Javascript)","alert('hello')");
@@ -56,6 +56,24 @@ div.select_box a:hover,div.select_box ul li:hover {
 
      echo $a->input();
      
+     ?>   
+     <?php
+     $a=new Select_Box("test2","click me !");
+     $a->set_filter(_("recherche"));
+     $a->add_value("Value = 10 (set value)",10);
+     $a->add_value("Value = 1 (set value)",1);
+     $a->add_value("Value = 17 (set value)",15);
+     $a->add_value("Value = 18 (set value)",15);
+     $a->add_value("Value = 19 (set value)",15);
+     $a->add_value("Value = 20 (set value)",15);
+     $a->add_value("Value = 25 (set value)",15);
+     $a->add_value("Value = 30 (set value)",15);
+     $a->add_value("Value = 40 (set value)",15);
+     $a->add_value("Value = 50 (set value)",15);
+     $a->add_value("Value = 51 (set value)",15);
+
+     echo $a->input();
+     
      ?>   
         </p>
         </div>