SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Thread: Searching

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

    Searching

    Hi,

    I am working on a site which is a front-end to a pupil management database. At various points, it is necessary to have the user select the pupil they want to view. I do this using a <SELECT> form element, with all the pupils being presentedin alphabetical order.

    I have been asked by some users to provide a search facility. What I'd like to do, it to put a button next to the form element which, when cliscked, causes a pop-up window to appear. This window should take a search item (a name, part of a name and preferably give wildcard options) and then close itself leaving the found item as the current selection in the <SELECT> box. Obviously, it also needs to be able to cope with empty or multiple result lists appropriately.

    Does anyone know of such a piece of code being already available? Or am I going to have to write my own, in which case can anyone offer me some suggestions on where to start?

    As always, Many many thanks in advance.
    Paul Simpson, BSc, MCNI, MCNE

  2. #2
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    The following links to an autocomplete Selection list thingy. In other words, if the list contains 'jan,jennie, job, john, joseph' it takes 3 keys to get to 'joseph' -- 'jos'

    http://www.webxpertz.net/forums/show...threadid=25939

    If you don't like it, use google and search for 'autocomplete combo' -- there is a script by 'kreuse' somewhere out there.

    geez paul, you guys should really hire me come here little English girls
    Vinny
    Where the World Once Stood
    the blades of grass
    cut me still

  3. #3
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Another implementation you can chew on

    http://www.codingforums.com/showthre...&threadid=9865
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  4. #4
    SitePoint Addict
    Join Date
    Dec 2001
    Location
    Market Harborough, UK
    Posts
    206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking Thanks!

    Quote Originally Posted by Vincent Puglia
    geez paul, you guys should really hire me images/smilies/smile.gif come here little English girls
    Vinny
    To be honest mate, you really wouldn't want to do that! [img]images/smilies/FRlol.gif[/img]

    Anywayz, I've had a quick look at the various suggestions and they certainly help the situation, however it isn't quite what I was after.

    Let us say that I have a list of the whole school population (682) in alphabetic order surname first(e.g Jones, Samantha). Now, someone is looking for a particular pupil but isn't sure of their surname. Next to the drop-down, I want to provide a button which brings up a pop-up window. The user types in "Sa" (or maybe "Sa*" or "*Sa*" or whatever) and then is presented with a list of all girls with the string "Sa" in their names,(e.g. Jones, Samantha; Smith, Sally;...) They can then double-click on the correct name and the popup windo should close and leave their chosen name as the currently selected one in the <SELECT>

    The solutions you have both suggested rely on the user starting to type at the beginning of the string......

    Paul
    Last edited by pauls; Sep 10, 2003 at 01:39.

  5. #5
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Aaah! you want a textBased dbms search! Something like what "Ask Sam" (an old ms-dos app) had.
    how many fields? 2 or 3? text, sel w/complete list size 1, (optional) sel w/multiple size 10?

    Vinny
    Where the World Once Stood
    the blades of grass
    cut me still

  6. #6
    SitePoint Addict
    Join Date
    Dec 2001
    Location
    Market Harborough, UK
    Posts
    206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Errrr, yes, if you say so!

    Seriously, all I need to do is to open a popup (passing the ID of a <SELECT> to it). Read in all of the <OPTION>s from it. Find all of the options whose values contan a string (as opposed to starting with it) Allow the user to choose the correct one and then set the originating <SELECT> to that item.....

    Paul
    Paul Simpson, BSc, MCNI, MCNE

  7. #7
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    3 fields, it is -- as soon as I get an English breakfast -- I mean break

    Vinny
    Where the World Once Stood
    the blades of grass
    cut me still

  8. #8
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here ya go Paul:

    it's not pretty, but it does work -- to a degree; i'll leave the error trapping to you. if you see anything that doesn't seem like it belongs -- it probably doesn't (I just cut&pasted stuff from something else I'm playing with.)

    Code:
    var userVal = '';
    function searchSelect(fldObj, formObj, destSel)
    {
      fldVal = fldObj.value;
      destSel.options.length = 0;
      var selObj = formObj.mySelect;
      for (i=0; i < selObj.options.length; i++)
      {
    	 selText = selObj.options[i].text.toLowerCase();
    	 fldVal = fldVal.toLowerCase();
    	 if (selText.indexOf(fldVal) != -1)
    	 {
    	   selObj.options[i].selected = true;
    	   var ndx = destSel.options.length;
    	   destSel.options[ndx] = new Option(selText)
    	   destSel.options[ndx++].value = selObj.options[i].value;
    	 }
      }  
    }
     
    <form name="a">
       <input type="text" name="inputBox" onKeyup="searchSelect(this,this.form, this.form['results'])" autocomplete='on'>
    	<select name="mySelect">
    	  <option value="Adam">Adam</option>
    	  <option value="Beth">Beth</option>
    	  <option value="Bob">Bob</option>
    	  <option value="Orville">Orville</option>
    	  <option value="Raymundo">Raymundo</option>
    	  <option value="Jan">Jan</option>
    	  <option value="Job">Job</option>
    	  <option value="Johns">John</option>
    	  <option value="Johnson">Johnson</option>
    	  <option value="Joseph">Joseph</option>
       </select>
       <select name="results" size="5">
    	</select>
    </form>
    Vinny
    Where the World Once Stood
    the blades of grass
    cut me still

  9. #9
    SitePoint Addict
    Join Date
    Dec 2001
    Location
    Market Harborough, UK
    Posts
    206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hiya Vinny (and everyone else....)!

    Ok, I've been having a play with the code you posted and it's given me some very useful pointers. I've met a problem that's got me stumped though.

    What I have done is to try to set up a link next to the <SELECT> menu which opens a popup to contain the search dialog. My HTML test page is:-
    Code:
    <html>
    <HEAD>
    <TITLE>Test of &lt;SELECT&gt; searcher</TITLE>
    <script src="search.js"></script>
    </HEAD>
    <BODY>
    <h2>Test of &lt;SELECT&gt; searcher</h2>
    <FORM action="search.htm" method="GET">
    <SELECT name="test" id="test">
    <OPTION value="1" selected>One</OPTION>
    <OPTION value="2">Two</OPTION>
    <OPTION value="3">Three</OPTION>
    <OPTION value="4">Four</OPTION>
    <OPTION value="5">Five</OPTION>
    <OPTION value="6">Six</OPTION>
    <OPTION value="7">Seven</OPTION>
    <OPTION value="8">Eight</OPTION>
    <OPTION value="9">Nine</OPTION>
    <OPTION value="10">Ten</OPTION>
    <OPTION value="11">Eleven</OPTION>
    <OPTION value="12">Twelve</OPTION>
    <OPTION value="13">Thirteen</OPTION>
    <OPTION value="14">Fourteen</OPTION>
    <OPTION value="15">Fifteen</OPTION>
    <OPTION value="16">Sixteen</OPTION>
    <OPTION value="17">Seventeen</OPTION>
    <OPTION value="18">Eighteen</OPTION>
    <OPTION value="19">Nineteen</OPTION>
    <OPTION value="20">Twenty</OPTION>
    </SELECT>&nbsp;<a href="javascript:search(document.all['test']);">Search</a>
    </FORM>
    </BODY>
    </HTML>
    My Javascript is:-
    Code:
    var ggList;
    var ggPopupWindow;
    function search(list){
     ggList=list;
     var vWinSearch = window.open("", "Search", "width=250,height=250,status=yes,resizable=no,top=200,left=200");
     ggPopupWindow=vWinSearch;
     vWinSearch.opener = self;
     vWinSearch.document.write('<html>\n');
     vWinSearch.document.write('<head>\n');
     vWinSearch.document.write('<title>Search</TITLE>');
     vWinSearch.document.write('</head>\n');
     vWinSearch.document.write('<body>\n');
     vWinSearch.document.write('<FORM id=\"frm\">\n');
     vWinSearch.document.write('<input type=\"text\" name=\"inputBox\" id=\"inputBox\" onKeyup=\"window.opener.searchSelect()\" autocomplete=\"on\"><br>\n');
     vWinSearch.document.write('<select name=\"results\" id=\"results\" size=\"5\">\n');
     vWinSearch.document.write('</select>\n');
     vWinSearch.document.write('</FORM>\n');
     vWinSearch.document.write('</BODY>\n');
     vWinSearch.document.write('</html>\n');
    }
    function searchSelect()
    {
      fldVal = ggPopupWindow.frm.inputBox.value;
      ggPopupWindow.frm.results.options.length = 0;
      for (i=0; i < ggList.options.length; i++)
      {
    	selText = ggList.options[i].text.toLowerCase();
    	fldVal = fldVal.toLowerCase();
    	if (selText.indexOf(fldVal) != -1)
    	{
    	  var ndx = ggPopupWindow.frm.results.options.length;
    	  ggPopupWindow.frm.results.options[ndx] = new Option(selText)
    	  ggPopupWindow.frm.results.options[ndx++].value = ggList.options[i].value;
    	}
      }  
    }
    The problem I'm having is that when the searchSelect() function is called, I get an error on the line
    ggPopupWindow.frm.results.options[ndx] = new Option(selText)
    The error is
    Line 35
    Char 5
    Error: The server threw an exception
    I suspect it has something to do with dealing with two windows here, but I'm at a loss to know what the problem is. Can anyone explain please?

    Many thanks in advance...
    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
  •