Solved

Is there a way to use javascript to ignore certain words in a search form?

Posted on 2008-10-17
12
193 Views
Last Modified: 2012-05-05
Is there anyway to use javascript (or something else) to ignore words like "a, and, the" at the beginning of a title when using a search form?

Here is an example of the form below?  Would there be some way to incorporate something like that?  Thanks!

<form name="querybox" action="URL" method="get"

onsubmit=

"if(document.querybox.searchArg.value=='' || document.querybox.searchArg.value=='Search the Catalog'){ alert('Please enter a search parameter.');return false;}return true;"

id="querybox">

<input value="local" name="DB" type="hidden" /><input value="50" name="CNT" type=

"hidden" /><input maxlength="800" size="21" name="searchArg" value="Search the Catalog"

onclick="document.querybox.searchArg.value='';" />&nbsp;&nbsp;<select title=

"Select the index to search." class="" name="searchCode" id="searchCode">

<option selected value="GKEY^*">Keyword</option><option value="FT*">Keyword With Relevance</option><option value="TALL">Title</option><option value="TKEY^">Title Keyword</option><option value="JALL">Journal Title</option><option value="JKEY^">Journal Title Keyword</option><option value="NALL">Author (Left Anchored)</option><option value="AUTH+">Author Browse</option><option value="NKEY*">Author Keyword</option><option value="SUBJ@">Subjects</option><option value="SALL">Subject (Left Anchored)</option><option value="SUBJ+">Subject Browse</option><option value="CALL+">Call Number</option></select>
 

</select> <input id="quickSearchButton" value="Search" type="submit" alt=

"Go get search results" /> <input value="0" name="searchType" type="hidden" />

</form>

Open in new window

0
Comment
Question by:jianxin9
  • 6
  • 6
12 Comments
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 22742067
jianxin9,

Unless Javascript is doing the searching I suggest you put this in the DB or server language that will actually run the search.

In Javascript the simplest way to do this would be to call a function like the one below...

function replaceWords(ele) {
    var aWords = ["a","and","the"];
    for (var i=0; i
0
 

Author Comment

by:jianxin9
ID: 22742609
Thanks for posting!  I am trying your suggestion with this test page:
http://myweb.twu.edu/~bklug/catalog/test12_remove_art.html

Trying a search for "the nervous system" won't yield results, but "nervous system" will.

I am calling this as body onload and I have placed the javascript you posted in my file (see attached code snippet).  Do you think there is any way I can make it work this way?  Thanks!

 <body onLoad="touch();setFocus('page.newBooks');timedMsg(30, 2, 'Your session will end in 2 minutes!')" class="frameWorkUI">


//////////////////////////////////////////////////////////////////////

//////////////////////////////////////////////////////////////////////
 
 

 

 function replaceWords(ele) {

    var aWords = ["a","an","the"];

    for (var i=0; i<aWords.length; i++) {

        ele.value = ele.value.replace(/aWords[i]/,"");

    }

}

 

function highlightlink()

{

      var b = document.getElementsByTagName('body')[0];

      var re = /(Link to resource\(s\) by clicking here:)/g;

      

      if( b.innerHTML.match( re ) )

      {

            b.innerHTML = b.innerHTML.replace(re,"<span style='background-color:yellow;'>$1</span>");

      }

}
 

function numberPages()

{

            var rec = window.location.href.match(/recPointer=(\d+)/);

            var counter = rec ? rec[1] : 0;

 

            var allItems = getElementsByClassName('resultListCheckBox');

            for(var i = 0, e = allItems.length; i < e; i++)

            {

        if(allItems[i].firstChild)

        {

                var span = document.createElement('span');

                span.style.paddingLeft = '20px';

                span.innerHTML = parseInt(i, 10) + parseInt(counter, 10) + parseInt(1, 10);

                allItems[i].insertBefore(span, allItems[i].firstChild);

        }

            }

}

 

            //Got this from dustiandiaz.com.  No need to reinvent the wheel

            function getElementsByClassName(searchClass,node,tag) {

        var classElements = new Array();

        if ( node == null )

                node = document;

        if ( tag == null )

                tag = '*';

        var els = node.getElementsByTagName(tag);

        var elsLen = els.length;

        var pattern = new RegExp('(^|\\\\s)'+searchClass+'(\\\\s|$)');

        for (i = 0, j = 0; i < elsLen; i++) {

                if ( pattern.test(els[i].className) ) {

                        classElements[j] = els[i];

                        j++;

                }

        }

        return classElements;

            }

 

 

function setFocus(pageName)

{

   /*

   ** A pageName will get passed in , which we will use to set the focus.

   ** to add support for a new page use the /page:page/@nameId (from the XML)

   ** value for the case match, and call the focusElement() function with the

   ** id of the form element to set focus to

   ** 

   */

 

   switch(pageName)

   {

      case 'page.searchBasic':

      case 'page.searchSubject':

      case 'page.searchAuthor':

         focusElement('searchArg');

         break;

         

      case 'page.searchAdvanced':

         focusElement('searchArg1');

         break;

         

      case 'page.logIn':

         focusElement('loginId');

         break;

 

 }  

 

        numberPages()

        highlightlink()

		replaceWords(ele);

        

return true;

}
 

 

 
 

 
 
 

  <!--End edited by TWU Library  -->

 
 

 

 

//////////////////////////////////////////////////////////////////////

function focusElement(eleName) {

   if(document.getElementById(eleName)) {

      document.getElementById(eleName).focus();

   }

}

///////////////////////////////////////////////////////////////

Open in new window

0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 22743268
There was an error in the code I suggested.  The method I tried needs to be changed a bit so a variable can be used.  The function needs to be as I have below (see snippet).  That will successfully do the replace.
If you have a question about how to use it please clarify what would run the search.  Thanks for the URL and info but I am not real clear on what runs the search or where this function needs to be called.  If you can narrow that down then it will save me from having to look through all of the page and code. :)
Hopefully the problem was just the code I provided but let me know how it works or if you need more info to use it.
bol

function replaceWords(ele) {

    var aWords = ["a","and","the"];

    for (var i=0; i<aWords.length; i++) {

        var myExp = new RegExp(aWords[i]);

        ele.value = ele.value.replace(myExp,"");

    }

}

Open in new window

0
 

Author Comment

by:jianxin9
ID: 22743400
Sorry about that!  You are right--that would be a lot of code to sort through.

I am not sure if this helps, but this is the form.  I guess it is cgi that runs the search?  Is it possible to call the search, when the "search" button is pressed?
        <form id="newBooks" action="http://enterprise.twu.edu/vwebv/newBooks.cgi" accept-charset="UTF-8" method="get">

            <div id="searchParams">

              <div id="searchInputs" class="inputStyle">

                <label>Find new books in:</label>

                <select name="list" size="1">

                  <option selected value="all">All locations</option>

                  <option  value="Main">Main Library</option>
 

                  <option  value="Best">Bestsellers</option>

                  <option  value="Child">Children's Historical Collection</option>

                  <option  value="Juvenile">Juvenile</option>

                  <option  value="Media">Media-All Sites</option>

                  <option  value="Parkland">Parkland Library</option>

                  <option  value="Photo">Photographs</option>
 

                  <option  value="Presbyterian">Presbyterian Library</option>

                  <option  value="Library - Reference">Reference</option>

                  <option  value="Theses">Theses/Dissertations</option>

                  <option  value="Wom">Woman's Collection</option>

                </select>

                <label>for:</label>
 

                <select name="week" size="1">

                  <option selected value="1">last week</option>

                  <option  value="2">last 2 weeks</option>

                  <option  value="3">last 3 weeks</option>

                  <option  value="4">last 4 weeks</option>

                </select>

                <br><br>
 

                <label>Search for: (optional)</label>

                <input type="text" name="text" value="the nervous system" size="30">

              </div>

            </div>

            <div title="" id="searchRecs">

              <label>Records per page:</label>

              <select name="rppg" size="1">

                <option selected value="10">10 records per page</option>
 

                <option  value="20">20 records per page</option> 

                <option  value="25">25 records per page</option>

                <option  value="50">50 records per page</option>

              </select>

            </div>

            <div>

              <input type="hidden" name="sort" value="callno">

              <input type="hidden" name="stpt" value="1">
 

              <input type="hidden" name="sk" value="en_US">

            </div>

            <div id="searchLinks">

              <input type="submit" name="submit" id="page.search.search.button" value="Search">

            </div>

          </form>

Open in new window

0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 22745515
The real place to make this change is in the newBooks.cgi file then since it seems to be what does the seach.  It is more reliable and efficient to do it on the server side.
If you are going to do it in Javascript then you should probably make the change to the value when the form is submitted.  It can be done like ...
        <form id="newBooks" action="http://enterprise.twu.edu/vwebv/newBooks.cgi" accept-charset="UTF-8" method="get" onsubmit="replaceWords(this.form.elements['text']);">
Notice the onsubmit event I added and its code.  One note ... the "name" of the field is "text" which will not be good to use.  I recommend using a more unique name even if it is just "text1".  If you do make that change then make sure you change the part of the code above too.
That should make it so the form will do the search when the Search button is pressed.  However for some reason the search seems to be happening even when the page loads so I don't know if there is other stuff that will interfere with the form's normal action/behavior.  At the very least the code I provided will show you how the function I made can be used.
Let me know how this helps or if you have a question.
bol
0
 

Author Comment

by:jianxin9
ID: 22745823
Thanks again!  So if I try this:
  <form id="newBooks" action="http://enterprise.twu.edu/vwebv/newBooks.cgi" accept-charset="UTF-8" method="get" onsubmit="replaceWords(this.form.elements['text1']);">

Will I need to make any changes here in the js file?

function replaceWords(ele) {
    var aWords = ["a","and","the"];
    for (var i=0; i<aWords.length; i++) {
        var myExp = new RegExp(aWords[i]);
        ele.value = ele.value.replace(myExp,"");
    }
}
0
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 22745849
No.  That form's onsubmit calls the function in your JS file.  It has to pass the argument to it, which is the search field from the form.  The script should be fine.
Let me know how it works or if you have any other questions.
bol
0
 

Author Comment

by:jianxin9
ID: 22745936
Hmmm, that didn't seem to work.  I appreciate the help though.  If you think there is anything else I could try, please let me know.  Thanks!
0
 
LVL 54

Accepted Solution

by:
b0lsc0tt earned 500 total points
ID: 22746175
What about my comment on where this should really be done?  I'm curious to hear your response because, if you will spend time on this, it is better to do it where most effective. :)
If you can provide more than "didn't seem to work" then I will be glad to help you get the function working in your page.  It does do the replace and will erase those words from the value.
Did you get an error message?  What browser did you use to test it?  Did you actually try this when submitting the form?  Are there any other scripts, etc that are part of the submit process and could be interfering?
bol
0
 

Author Comment

by:jianxin9
ID: 22757501
Thanks again for commenting.  Yes, I think I will look into your comment about where this should really be done.  I just wanted to see if I could get it work this way first, if possible.  

I tested this in IE7 and FF3.  There isn't an error message--it's just not erase those words from the value.  I don't think there are any other scripts that would be interfering.  I have posted what I am testing below--did I leave anything out?

Thanks again!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>
 

<script type="text/javascript">

function replaceWords(ele) {

    var aWords = ["a","and","the"];

    for (var i=0; i<aWords.length; i++) {

        var myExp = new RegExp(aWords[i]);

        ele.value = ele.value.replace(myExp,"");

    }

}</script>

</head>
 

<body>   <form name="querybox" action="http://enterprise.twu.edu/vwebv/search" method="get" onSubmit="replaceWords(this.form.elements['text1']);">
 
 
 

<input value="local" name="DB" type="hidden" /><input value="50" name="CNT" type=

"hidden" /><input maxlength="800" size="21" name="searchArg" value="Search the Catalog"

onclick="document.querybox.searchArg.value='';" />&nbsp;&nbsp;<select title=

"Select the index to search." class="" name="searchCode" id="searchCode">

<option selected value="GKEY^*">Keyword</option><option value="FT*">Keyword With Relevance</option><option value="TALL">Title</option><option value="TKEY^">Title Keyword</option><option value="JALL">Journal Title</option><option value="JKEY^">Journal Title Keyword</option><option value="NALL">Author (Left Anchored)</option><option value="AUTH+">Author Browse</option><option value="NKEY*">Author Keyword</option><option value="SUBJ@">Subjects</option><option value="SALL">Subject (Left Anchored)</option><option value="SUBJ+">Subject Browse</option><option value="CALL+">Call Number</option></select>
 

</select> <input id="quickSearchButton" value="Search" type="submit" alt=

"Go get search results" /> <input value="0" name="searchType" type="hidden" />

</form>

</body>

</html>

Open in new window

0
 

Author Closing Comment

by:jianxin9
ID: 31507177
thanks for your help!
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 22854836
Your welcome!  I'm glad I could help.  Thanks for the grade, the points and the fun question.
Sorry I never had a chance to respond to your last comment so let me know if you still need something for it.  It has been a very busy couple of weeks and my time helping here has REALLY suffered. :(
bol
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

A little background as to how I came to I design this code: Around 5 years ago I designed an add-in that formatted Excel files to a corporate standard, applying different cell colours and font type depending on whether the cells contained inputs,…
This tutorial explains how to create a series of drop-down lists that are dependent upon prior selections to guide (“force”) the user to make the correct selection and reduce data errors within Microsoft Excel. Excel 2010 was used for this tutorial;…
The view will learn how to download and install SIMTOOLS and FORMLIST into Excel, how to use SIMTOOLS to generate a Monte Carlo simulation of 30 sales calls, and how to calculate the conditional probability based on the results of the Monte Carlo …
This Micro Tutorial will demonstrate how to create pivot charts out of a data set. I also added a drop-down menu which allows to choose from different categories in the data set and the chart will automatically update.

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now