SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Dec 2001
    Location
    Market Harborough, UK
    Posts
    206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Very Very nearly working <SELECT> Searcher!!!

    Well, I've just about got my facility to have a fully searchable <SELECT> list working.

    Firstly, thanks to everyone who has answered various questions I've had along the way. My solution may not be elegant, but it works (well 99%) so if anyone else wants to steal it, feel free! Also, if anyone can suggest any optimisation, I'm more than happy to get it more efficiant!

    My javascript for this is:-
    Code:
    function search(lst){
     var list=document.all[lst];
     var vWinSearch = window.open("", "Search", "width=250,height=250,status=yes,resizable=no,top=200,left=200");
     vWinSearch.document.write('<html>\n');
     vWinSearch.document.write('<head>\n');
     vWinSearch.document.write('<title>Search</TITLE>');
     vWinSearch.document.write('<script>\n');
     vWinSearch.document.write('var srclist=new Array();\n');
     for(i=0;i< list.options.length;i++){
      vWinSearch.document.write('srclist['+i+']=\"'+list.options[i].text+'\"\n');
     }
     vWinSearch.document.write('function searchSelect()\n');
     vWinSearch.document.write('{\n');
     vWinSearch.document.write(' fldVal = document.frm.inputBox.value;\n');
     vWinSearch.document.write(' document.frm.results.options.length = 0;\n');
     vWinSearch.document.write(' for (i=0; i < srclist.length; i++)\n');
     vWinSearch.document.write(' {\n');
     vWinSearch.document.write('  selText = srclist[i].toLowerCase();\n');
     vWinSearch.document.write('  fldVal = fldVal.toLowerCase();\n');
     vWinSearch.document.write('  if ((selText.indexOf(fldVal) != -1)||(fldVal==null))\n');
     vWinSearch.document.write('  {\n');
     vWinSearch.document.write('   var ndx = document.frm.results.options.length;\n');
     vWinSearch.document.write('   document.frm.results.options[ndx] = new Option(srclist[i]);\n');
     vWinSearch.document.write('   document.frm.results.options[ndx++].value = i;\n');
     vWinSearch.document.write('  }\n');
     vWinSearch.document.write(' }\n');
     vWinSearch.document.write('}\n');
     vWinSearch.document.write('function populate()\n');
     vWinSearch.document.write('{\n');
     vWinSearch.document.write(' window.opener.document.getElementById(\''+lst+'\').options[document.frm.results.value].selected=true;\n');
     vWinSearch.document.write(' window.opener.document.getElementById(\''+lst+'\').onchange();\n'); 
     vWinSearch.document.write(' window.close();\n'); 
     vWinSearch.document.write('}\n');
     vWinSearch.document.write('\<\/script\>\n');
     vWinSearch.document.write('</head>\n');
     vWinSearch.document.write('<body>\n');
     vWinSearch.document.write('<FORM name=\"frm\" id=\"frm\">\n');
     vWinSearch.document.write('<input type=\"text\" name=\"inputBox\" id=\"inputBox\" onKeyup=\"searchSelect()\" autocomplete=\"on\"><br>\n');
     vWinSearch.document.write('<select name=\"results\" id=\"results\" size=\"5\" ondblclick=\"populate();\">\n');
     vWinSearch.document.write('</select>\n');
     vWinSearch.document.write('</FORM>\n');
     vWinSearch.document.write('</BODY>\n');
     vWinSearch.document.write('</html>\n');
     vWinSearch.searchSelect();
     vWinSearch.frm.inputBox.focus();
    }
    All you have to do is to put a link next to a <SELECT> on you page which runs this function and pass the ID of the <SELECT> to it. A popup will appear to help you search. The popup has two fields, the top is a text box into which you type your search, the bottom is a list of found items. This begins by being full of all the values in your <SELECT> but as you type in the text box, the list is narrowed down to only those elements containing the string. If you double-click on an item in the list, the popup closes itself and the current item in the <SELECT> is changed to the chosen element.

    Ok, so far so good. The problems / issues etc which would give me the extra 1% are:-
    1. How can I modify the searchSelect() function so that while it is running, the mouse cursor changes to the hourglass and further input is disabled?
    2. Can I speed it up in any way? I tried not dynamically creating the array and accessing the <SELECT>'s options list in real-time, but this proved to be MUCH slower. Trouble is, with some of my lists running to 700+ items, the popup can take a few seconds to appear!
    3. Currently, the user can click outside the popup window and in effect hide it. I'd like to either force the popup to stay on top, or detect when it has been backgrounded and close it. The issue is that my users can navigate away from the calling page which makes the popup invalid!
    4. If 3 isn't possible, is there any way I can prevent two instances running? The other problem I have is that users open the search box, accidentally return to the calling window and the try to get back to the search box by re-clicking on the search link. This causes all the code to be re-written to the same window and then, of course, it fails.
    Once again, thanks in advance for any help.....
    Paul Simpson, BSc, MCNI, MCNE

  2. #2
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this code to close the popup window if it looses focus

    Code:
    <html>
    <head>
    
    <title>Popup Tester</title>
    
    <script type="text/javascript">
    
    function Popup()
    {
      var vWinSearch = window.open("", "", "width=400,height=250" );
      
      with(vWinSearch.document)
      {
    	writeln('<html>');
    	writeln('<head>');
    	writeln('<title>Popup</title>');
    	writeln('</head>');
    	writeln('<body onblur="window.close()">');
    
    	writeln('<a href="javascript:window.close()">Close</a>');
    	writeln('</body>');
    	writeln('</html>');
    	close();
     }
    
    }
    </script>
    
    </head>
    <body>
    
    <a href='javascript:Popup()'>Popup</a><br />
    
    </body>
    </html>
    I tried putting a window.focus() in the onblur event but it didn't work properly (you could still swop to the original window using the taskbar).

  3. #3
    SitePoint Addict
    Join Date
    Dec 2001
    Location
    Market Harborough, UK
    Posts
    206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the suggestion, Ben, but nope, didn't work
    Paul Simpson, BSc, MCNI, MCNE


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •