otsdaq_utilities  v2_04_02
MultiSelectBox.js
1 //
5 // To make a Multi-Select Box
6 // create a div element and call in JavaScript...
7 //
8 // MultiSelectBox.createSelectBox(el,name,title,vals)
9 //
10 // This function is called by user to actually create the multi select box
11 // These parameters are optional and can be omitted or set to 0:
12 // keys, types, handler, noMultiSelect,mouseOverHandler,iconURLs,mouseDownHandler,
13 // mouseUpHandler,
14 // requireCtrlMultiClick,titles
15 // Note: handler is the string name of the function (put in quotes).
16 // Note: requireCtrlMultiClick enables CONTROL or SHIFT key selections
17 // - sometimes CONTROL forces right click in browser, so SHIFT is needed
18 //
19 // Can use MultiSelectBox.initMySelectBoxes after manually setting the mySelects_ array
20 //
21 //
22 //
23 // Example selection handler:
24 //
25 // function exampleSelectionHandler(el)
26 // {
27 // var splits = el.id.split('_');
28 // var i = splits[splits.length-1] | 0;
29 // MultiSelectBox.dbg("Chosen element index:",i,
30 // " key:",el.getAttribute("key-value"),
31 // " type:",el.getAttribute("type-value"));
32 // for(var s in MultiSelectBox.mySelects_[el.parentElement.id])
33 // MultiSelectBox.dbg("selected: ",MultiSelectBox.mySelects_[el.parentElement.id][s]);
34 //
35 // }
36 //
37 // Example usage: /WebPath/html/MultiSelectBoxTest.html
38 //
41 
42 
43 //function list:
44 // createSelectBox(el,name,title,vals,keys,types,
45 // handler,noMultiSelect,mouseOverHandler,iconURLs,mouseDownHandler,
46 // mouseUpHandler,
47 // requireCtrlMultiClick,titles)
48 // initMySelectBoxes(clearPreviousSelections)
49 //
50 // hasClass(ele,cls)
51 // addClass(ele,cls)
52 // removeClass(ele,cls)
53 // toggleClass(ele,cls)
54 //
55 // getSelectedIndex(el)
56 // getSelectionArray(el)
57 // getSelectionElementByIndex(el,i)
58 // setSelectionElementByIndex(el,i,selected)
59 // myOptionSelect(option, index, isSingleSelect, event)
60 //
61 // showSearch(boxid)
62 // searchSelect(id,el,altstr)
63 // performSearchSelect(id,el,altstr)
64 // makeSearchBar(id)
65 
66 var selected = [];
67 var MultiSelectBox = MultiSelectBox || {}; //define MultiSelectBox namespace
68 
69 if(window.console && console && console.log)
70  MultiSelectBox.dbg = console.log.bind(window.console);
71 //var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
72 
73 function $(id) {return document.getElementById(id);}
74 
76 //global variables
77 
78 MultiSelectBox.mySelects_ = {};
79 MultiSelectBox.omnis_ = {};
80 MultiSelectBox.isSingleSelect_ = {};
81 MultiSelectBox.lastOptSelect_ = {}; //maintain last opt clicked
82 
83 MultiSelectBox.selInitBoxHeight_ = {}; //init with first showing of search box in showSearch()
84 MultiSelectBox.SEL_INIT_PADDING = 5;
85 
86 MultiSelectBox.requireCtrlMultiClick_ = {};
87 
89 //function definitions
90 
91 MultiSelectBox.hasClass = function(ele,cls)
92 {
93  return !!ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
94 } //end hasClass()
95 
96 MultiSelectBox.addClass = function(ele,cls)
97 {
98  if (!MultiSelectBox.hasClass(ele,cls)) ele.className += " "+cls;
99 } //end addClass()
100 
101 MultiSelectBox.removeClass = function(ele,cls)
102 {
103  if (MultiSelectBox.hasClass(ele,cls))
104  {
105  var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
106  ele.className=ele.className.replace(reg,'');
107  }
108 } //end removeClass()
109 
110 MultiSelectBox.toggleClass = function(ele,cls)
111 {
112  //returns true if the element had the class
113  if (MultiSelectBox.hasClass(ele,cls))
114  {
115  var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
116  ele.className=ele.className.replace(reg,'');
117  return true;
118  }
119  else
120  {
121  ele.className += " " + cls;
122  return false;
123  }
124 } //end toggleClass()
125 
126 MultiSelectBox.getSelectedIndex = function(el)
127 {
128  try //try to treat as selection box element first
129  {
130  var selects = MultiSelectBox.mySelects_[el.getElementsByClassName("mySelect")[0].id];
131  for(var i=0;i<selects.length;++i)
132  if(selects[i]) return i;
133  return -1; //no index selected
134  }
135  catch(e){} // ignore error and treat as selected element now
136 
137  var splits = el.id.split('_');
138  return splits[splits.length-1] | 0;
139 } //end getSelectedIndex()
140 
141 MultiSelectBox.getSelectionArray = function(el)
142 {
143  //console.log(el.id);
144  if(el.parentElement.id.indexOf("selbox-") == 0)
145  return MultiSelectBox.mySelects_[el.parentElement.id];
146  else
147  return MultiSelectBox.mySelects_[el.getElementsByClassName("mySelect")[0].id];
148 } //end getSelectionArray()
149 
150 MultiSelectBox.getSelectionElementByIndex = function(el,i)
151 {
152  if(el.parentElement.id.indexOf("selbox-") == 0)
153  return document.getElementById(el.parentElement.parentElement.
154  getElementsByClassName("mySelect")[0].id +
155  "-option_" + i);
156  else
157  return document.getElementById(el.getElementsByClassName("mySelect")[0].id +
158  "-option_" + i);
159 } //end getSelectionElementByIndex()
160 
161 MultiSelectBox.setSelectionElementByIndex = function(el,i,selected)
162 {
163  var name = el.getElementsByClassName("mySelect")[0].id;
164  if(MultiSelectBox.isSingleSelect_[name] &&
165  selected) //if true, only allow one select at a time, so deselect others
166  {
167  var size = MultiSelectBox.mySelects_[name].length;
168  for (var opt=0; opt<size; opt++)
169  MultiSelectBox.mySelects_[name][opt] = 0;
170  }
171  MultiSelectBox.mySelects_[name][i] = selected?1:0;
172 } //end setSelectionElementByIndex()
173 
174 //for multiple selects to behave like checkboxes
175 MultiSelectBox.myOptionSelect = function(option, index, isSingleSelect, event)
176 {
177  var select = option.parentElement;
178  var id = select.getAttribute("id");
179  var selectList = MultiSelectBox.mySelects_[id];
180  var size = select.childNodes.length;
181 
182  if(event)
183  MultiSelectBox.dbg("Shift click = " + event.shiftKey);
184 
185  if(event)
186  MultiSelectBox.dbg("Control click = " + event.ctrlKey);
187 
188  //if shift.. then select or deselect
189  // (based on value at MultiSelectBox.lastOptSelect_[id]) from
190  // MultiSelectBox.lastOptSelect_[id]
191  // to this click
192 
193  //MultiSelectBox.dbg(selectList);
194  if (!selectList || selectList.length!=size)
195  { //first time, populate select list
196  MultiSelectBox.mySelects_[id] = [];
197  MultiSelectBox.lastOptSelect_[id] = -1;
198  selectList=MultiSelectBox.mySelects_[id];
199  for (var opt=0; opt<size; opt++)
200  selectList.push(0);
201  }
202 
203  //toggle highlighted style and global array
204  MultiSelectBox.toggleClass(option,"optionhighlighted");
205  selectList[index] ^= 1;
206 
207  if(isSingleSelect || //if true, only allow one select at a time, so deselect others
208  (MultiSelectBox.requireCtrlMultiClick_[id] && !event.ctrlKey && !event.shiftKey))
209  for (var opt=0; opt<size; opt++)
210  {
211  //fixed, now works for any order option IDs. Goes by index only.
212  var cindex = select.childNodes[opt].id.split("_");
213  cindex = cindex[cindex.length-1];
214 
215  if(cindex == index) continue;
216  else if(selectList[cindex] == 1)
217  {
218  MultiSelectBox.toggleClass(select.childNodes[opt],"optionhighlighted");
219  selectList[cindex] = 0;
220  }
221  }
222  else if(event.shiftKey &&
223  MultiSelectBox.lastOptSelect_[id] != -1)
224  {
225  //if shift.. then select or deselect
226  // (based on value at MultiSelectBox.lastOptSelect_[id]) from
227  // MultiSelectBox.lastOptSelect_[id]
228  // to this click
229 
230  var lo = MultiSelectBox.lastOptSelect_[id] < index?
231  MultiSelectBox.lastOptSelect_[id]:index;
232  var hi = MultiSelectBox.lastOptSelect_[id] < index?
233  index:MultiSelectBox.lastOptSelect_[id];
234 
235  //MultiSelectBox.dbg("lo ",lo," hi ",hi);
236  //handle multi shift click
237  for (var opt=lo; opt<=hi; opt++)
238  {
239  //MultiSelectBox.dbg(selectList[opt]," vs ",
240  // selectList[MultiSelectBox.lastOptSelect_[id]]);
241  if(selectList[opt] !=
242  selectList[MultiSelectBox.lastOptSelect_[id]]) //if not matching selected value
243  {
244  //MultiSelectBox.dbg("flip");
245  //toggle highlighted style and global array
246  MultiSelectBox.toggleClass(select.childNodes[opt],"optionhighlighted");
247  selectList[opt] ^= 1;
248  }
249  }
250  }
251 
252  MultiSelectBox.dbg(selectList);
253  selected = selectList;
254  MultiSelectBox.lastOptSelect_[id] = index; //save selection
255 } //end myOptionSelect()
256 
257 //This function is called by user to actually create the multi select box
258 // These parameters are optional and can be omitted or set to 0:
259 // keys, types, handler, noMultiSelect, mouseOverHandler,
260 // iconURLs, mouseDownHandler, mouseUpHandler,
261 // requireCtrlMultiClick
262 // Note: handler is the string name of the function
263 MultiSelectBox.createSelectBox = function(el,name,title,vals,keys,types,
264  handler,noMultiSelect,mouseOverHandler,iconURLs,mouseDownHandler,
265  mouseUpHandler,
266  requireCtrlMultiClick,titles)
267 {
268  if(!el)
269  { MultiSelectBox.dbg("Invalid Element given to MultiSelectBox: " + el);
270  throw new Error("Invalid Element given to MultiSelectBox: " + el); return; }
271 
272  el.innerHTML = ""; //delete current contents
273 
274  name = "selbox-" + name;
275  MultiSelectBox.addClass(el,"multiselectbox"); //add multiselectbox class to div
276 
277  MultiSelectBox.omnis_[name] = el;
278  MultiSelectBox.isSingleSelect_[name] = noMultiSelect;
279  MultiSelectBox.lastOptSelect_[name] = -1; //default to nothing selected
280  MultiSelectBox.selInitBoxHeight_[name] = 0; //init with first showing of search box in showSearch()
281  MultiSelectBox.requireCtrlMultiClick_[name] = requireCtrlMultiClick;
282 
283  //searchglass=28x28, margin=5, vscroll=16, border=1
284  var msW = (!el.offsetWidth?el.style.width.split('p')[0]:el.offsetWidth) - 28 - 5 - 16 - 2;
285  var msH = (!el.offsetHeight?el.style.height.split('p')[0]:el.offsetHeight) - 40 - 2;
286 
287  el = document.createElement("div"); //create element within element
288  MultiSelectBox.omnis_[name].appendChild(el);
289 
290  var str = "";
291 
292  if(title)
293  {
294  str += "<div id='" + name + "header' " +
295  "style='margin-top:20px;width:100%;white-space:nowrap'><b>"
296  str += title;
297  str += "</b></div>";
298  }
299 
300  if(!keys) keys = vals;
301  if(!types) types = vals;
302 
303  //make selbox
304  str += "<table cellpadding='0' cellspacing='0'>";
305  str += "<tr><td>";
306  str += "<div class='mySelect' unselectable='on' id='" +
307  name + "' style='float:left;" +
308  "width: " + (msW) + "px;" +
309  "height: " + (msH) + "px;" +
310  "' name='" + name + "' " +
311  ">";
312 
313  for (var i = 0; i < keys.length;++i)//cactus length
314  {
315  str += "<div class='myOption' " +
316  "id='" + name + "-option_" + i + "' " +
317  "onclick='MultiSelectBox.myOptionSelect(this, " + i + "," +
318  noMultiSelect + ", event); ";
319  if(handler && (typeof handler) == "string") //if handler supplied as string
320  str += handler + "(this,event);"; //user selection handler
321  else if(handler) //assume it is a function
322  str += handler.name + "(this,event);"; //user selection handler
323  str += "' ";
324 
325  str += "onmouseover='";
326  if(mouseOverHandler && (typeof mouseOverHandler) == "string") //if mouseOverHandler supplied as string
327  str += mouseOverHandler + "(this,event);"; //user selection mouseOverHandler
328  else if(mouseOverHandler) //assume it is a function
329  str += mouseOverHandler.name + "(this,event);"; //user selection mouseOverHandler
330  str += "' ";
331 
332  str += "onmousedown='";
333  if(mouseDownHandler && (typeof mouseDownHandler) == "string") //if mouseDownHandler supplied as string
334  str += mouseDownHandler + "(this,event);"; //user selection mouseDownHandler
335  else if(mouseDownHandler) //assume it is a function
336  str += mouseDownHandler.name + "(this,event);"; //user selection mouseDownHandler
337  str += "' ";
338 
339  str += "onmouseup='";
340  if(mouseUpHandler && (typeof mouseUpHandler) == "string") //if mouseUpHandler supplied as string
341  str += mouseUpHandler + "(this,event);"; //user selection mouseUpHandler
342  else if(mouseUpHandler) //assume it is a function
343  str += mouseUpHandler.name + "(this,event);"; //user selection mouseUpHandler
344  str += "' ";
345 
346  if(titles)
347  str += "title='" + titles[i] + "' ";
348 
349  str += "key-value='" + keys[i] + "' type-value='" +
350  types[i] + "'>"; //index, key, ids available as attributes
351  if(iconURLs && iconURLs[i]) //add image if available
352  {
353  if(iconURLs[i][0] != '=')
354  str += "<img style='width:32px; height:32px; margin: 0px 5px -8px 0;' " +
355  "src='" +
356  iconURLs[i] + "' />";
357  else //alt text
358  str += iconURLs[i].substr(1) + " - ";
359  }
360 
361  str += vals[i];
362  str += "</div>";
363  }
364  str += "</div>";
365  //close selbox
366 
367  str += "</td><td valign='top'>";
368  //append search bar
369  str += MultiSelectBox.makeSearchBar(name);
370  str += "</td></table>";
371  el.innerHTML = str;
372 
373  if(msH > 200)
374  { //provide a minimum width for looks (to avoid long and skinny)
375  var el = document.getElementById(name);
376  if(msW < 200)
377  el.style.width = 200 + "px";
378  }
379 
380 } //end createSelectBox()
381 
382 //for initializing the highlights if selects are made "manually" (without clicking)
383 MultiSelectBox.initMySelectBoxes = function(clearPreviousSelections)
384 {
385  var divs=document.getElementsByClassName('mySelect');
386  for (var el=0; el<divs.length; el++){
387  var select = divs[el];
388 
389  var id = select.getAttribute("id");
390  var options = select.childNodes;
391  MultiSelectBox.lastOptSelect_[id] = -1;
392  if (!MultiSelectBox.mySelects_[id] ||
393  MultiSelectBox.mySelects_[id].length > options.length)
394  {//if first time drawing select box OR size was reduced
395  MultiSelectBox.mySelects_[id]=[];
396  for (var opt=0; opt<options.length; opt++)
397  {
398  MultiSelectBox.mySelects_[id].push(0);
399  options[opt].setAttribute("unselectable","on");//make not selectable for ie<10
400  }
401  }
402  else
403  { //if repaint: set highlighted options
404  MultiSelectBox.dbg("repaint");
405 
406  //if more elements were added, expand the selects array
407  for (var opt=MultiSelectBox.mySelects_[id].length; opt<options.length; opt++)
408  {
409  MultiSelectBox.mySelects_[id].push(0);
410  options[opt].setAttribute("unselectable","on");//make not selectable for ie<10
411  }
412 
413  //highlight properly according to mySelects_ array
414  for (var opt=0; opt < options.length; opt++)
415  {
416  if (clearPreviousSelections)
417  MultiSelectBox.mySelects_[id][opt] = 0; //clear
418 
419  if (MultiSelectBox.mySelects_[id][opt])
420  {
421  //MultiSelectBox.dbg(opt);
422  MultiSelectBox.addClass(options[opt],"optionhighlighted");
423  options[opt].scrollIntoView(); //so highlighted are visible to user
424  }
425  else
426  MultiSelectBox.removeClass(options[opt],"optionhighlighted");
427  }
428  }
429  }
430 } //end initMySelectBoxes()
431 
432 //for searching selectboxes (works for standard "selects" and "mySelects")
433 MultiSelectBox.showSearch = function(boxid)
434 {
435  var searchBox=$(boxid+"search");
436 
437  function localPlaceSearchBox()
438  {
439  //Goal: place searchBox search input correctly in table content
440  // irregardless of user div having style.position = normal/static, absolute, relative
441 
442  //finding the search input's offset parent is not so straight forward
443  // since it is initially hidden.
444  // Use the offset parent of the content table
445  // sibling[0] := div (of content)
446  // withing div, child[0] := header, child[1] := table (of content)
447 
448  var selRect = $(boxid).getBoundingClientRect();
449  var searchOffsetParent = searchBox.parentElement.children[0].children[1].offsetParent;
450  //check if there is no offset parent (the body is the offset parent)
451  // it seems to be the case that body returns a crazy bounding client rect (left = 8 and top = 13?) .. don't understand why
452  var searchOffsetParentIsBody = searchOffsetParent == document.body;
453 
454  var offsetRect =
455  {"left": searchOffsetParentIsBody?0:
456  searchOffsetParent.getBoundingClientRect().left, //offsetLeft is different
457  "top": searchOffsetParentIsBody?0:
458  searchOffsetParent.getBoundingClientRect().top
459  };
460  //previous attempts to place search input (all fail to solve all cases):
461  //MultiSelectBox.omnis_[id].getBoundingClientRect();
462  //select.offsetParent.getBoundingClientRect();
463 
464  var offsetx = selRect.left - offsetRect.left,
465  offsety = selRect.top - offsetRect.top;
466  var margin = 5;
467 
468  searchBox.style.position="absolute";
469  searchBox.style.top=(offsety)+"px";
470  searchBox.style.left=(offsetx)+"px";
471  searchBox.style.width=(selRect.width-margin*2-30)+"px";
472  //searchBox.style.display = "block"; //for debugging position
473  } //end localPlaceSearchBox()
474 
475  if(!MultiSelectBox.selInitBoxHeight_[boxid]) //init if not yet defined
476  {
477  MultiSelectBox.selInitBoxHeight_[boxid] = $(boxid).clientHeight; //as soon as hidden is toggled H changes
478 
479  localPlaceSearchBox();
480  }
481 
482 
483 
484  //RAR decided on 2/2/2017 to not show er
485  //MultiSelectBox.toggleClass($(boxid+"searchErr"),"hidden");
486  $(boxid+"searchErr").innerHTML = "";
487 
488  if (MultiSelectBox.toggleClass(searchBox,"hidden")){
489  $(boxid).style.height = (MultiSelectBox.selInitBoxHeight_[boxid]-47) + "px";
490  $(boxid).style.paddingTop = "42px";
491  //$(boxid).childNodes[0].style.marginTop="42px";
492  //searchBox.style.left = ($(boxid).offsetLeft-8) + "px"
493  searchBox.focus();
494  MultiSelectBox.searchSelect(boxid,searchBox);
495  }
496  else{
497  MultiSelectBox.searchSelect(boxid,null, '');
498  $(boxid).style.paddingTop = MultiSelectBox.SEL_INIT_PADDING + "px";
499  $(boxid).style.height = (MultiSelectBox.selInitBoxHeight_[boxid]-10) + "px";
500  //$(boxid).childNodes[0].style.marginTop="initial";
501  }
502 } //end showSearch()
503 
504 MultiSelectBox.searchTimeout_ = null;
505 
506 MultiSelectBox.searchSelect = function(id,el,altstr)
507 {
508  //wait 100ms so that it does not keep constantly searching as user types only when they are done typing
509  if (MultiSelectBox.searchTimeout_){
510  clearTimeout(MultiSelectBox.searchTimeout_);
511  }
512  MultiSelectBox.searchTimeout_ = setTimeout(function(){ MultiSelectBox.performSearchSelect(id,el,altstr); }, 100);
513 } //end searchSelect()
514 
515 MultiSelectBox.performSearchSelect = function(id,el,altstr)
516 {
517  var searchstr;
518  if (altstr !== undefined){
519  searchstr = altstr;
520  }
521  else{
522  searchstr = el.value;
523  }
524  MultiSelectBox.searchTimeout_ = null;
525  var select = $(id).childNodes;
526 
527  MultiSelectBox.dbg("END OF TIMEOUT FOR : "+searchstr);
528 
529  var re; //regular expression
530  $(id+"searchErr").innerHTML = "";
531  try {
532  re = new RegExp(searchstr,'i');
533  }
534  catch(err) { //invalid regular expression
535  $(id+"searchErr").innerHTML = err.message +
536  " <a href='https://regex101.com/' target='_blank'>(help)</a>";
537  re = "";
538  }
539 
540  for (var opt=0; opt < select.length; opt++)
541  {
542  var option = select[opt];
543 
544  //MultiSelectBox.dbg("opt: " + opt);
545 
546  if (option.tagName == 'INPUT') { continue; }
547  var html = option.innerHTML;
548 
549  //MultiSelectBox.dbg("tagName: " + option.tagName);
550 
551  //first set the hidden to unhidden and unbold the bolded
552  if (MultiSelectBox.hasClass(option,"hidden"))
553  MultiSelectBox.removeClass(option,"hidden");
554  else
555  option.innerHTML = html = html.replace("<b><u>","").replace("</u></b>","");
556 
557  if(searchstr == "") continue; //show all if no search str
558 
559  var text = option.textContent; //search only the text (assume that is val
560  var endOfImgIndex = html.indexOf(">");
561  var index = text.search(re);
562  var matchedText = (text.match(re) || [[]])[0]; //returns the matched string within an array or null (when null take [[]])
563  var len = matchedText.length; // so we want length of element 0
564  //MultiSelectBox.dbg(text+' '+index);
565  index = html.indexOf(matchedText,endOfImgIndex); //try to find in html text
566 
567  if(!len) //if searchstr not in option innerHTML
568  MultiSelectBox.addClass(option,"hidden");
569  else if(index != -1) //make searched string bold (if possible - must be contiguous)
570  option.innerHTML = html.slice(0,index) + "<b><u>" +
571  html.slice(index,index+len) +
572  "</u></b>" + html.slice(index+len);
573  }
574 } //end performSearchSelect()
575 
576 MultiSelectBox.makeSearchBar = function(id)
577 {
578  var searchBox=document.createElement("input");
579  var onchange='MultiSelectBox.searchSelect("' + id + '",this)';
580 
581  searchBox.setAttribute( "class","hidden");
582  searchBox.setAttribute( 'type','text');
583  searchBox.setAttribute( 'id',id + "search");
584  searchBox.setAttribute( "onpaste" , onchange);
585  searchBox.setAttribute( "oncut" , onchange);
586  searchBox.setAttribute( "onkeydown" , onchange);
587  searchBox.setAttribute( "onkeyup" , onchange);
588  searchBox.setAttribute( "onkeypress", onchange);
589  searchBox.setAttribute( "onselect" , onchange);
590 
591 
592  var searchErrBox=document.createElement("div");
593 
594  searchErrBox.setAttribute( "class","hidden");
595  searchErrBox.setAttribute( 'id',id + "searchErr");
596  searchErrBox.style.color="red";
597  searchErrBox.style.overflow="hidden";
598  searchErrBox.style.height="23px";
599 
600  var interval;
601  function addSearchBox()
602  {
603  var select=$(id);
604  if (select)
605  {
606  if(!MultiSelectBox.mySelects_[id])
607  MultiSelectBox.mySelects_[id] = []; //initialize to empty the selected items
608 
609 
610 
611  //err box no longer displayed...
612  // searchErrBox.style.position="absolute"; //place above title
613  // searchErrBox.style.top=(offsety - 37)+"px";
614  // searchErrBox.style.left=(offsetx + 0)+"px";
615 
616  MultiSelectBox.omnis_[id].appendChild(searchBox);
617  MultiSelectBox.omnis_[id].appendChild(searchErrBox);
618 
619 
620  clearInterval(interval);
621  }
622  }
623 
624  interval = setInterval( addSearchBox, 50);
625 
626  imgstr = "<img src='/WebPath/images/windowContentImages/multiselectbox-magnifying-glass.jpg' " +
627  " style='float:left' height='28' width='28' alt='&#128269;' ";
628  imgstr += "onclick = 'MultiSelectBox.showSearch(\"" + id + "\");' title='Search' class='searchimg'>";
629  return imgstr;
630 } //end makeSearchBar()
631 
632 
633