带有下拉选项的搜索框

Question

我想制作一个几乎像这样的搜索框https://roxburylibrary.org/，这就是我所做的https://jsfiddle.net/fkjow82y/，问题是，当选择了其他选项时，它不是在搜索。

<script type="text/javascript">

    function dosearch() {

    var sf=document.catalogSearch;

    var submit = sf.sengines.options[sf.sengines.selectedIndex].value + escape(sf.keyword.value);

    window.location.href = submit;

    return false;

    }
</script>

Answer 1

索引0包含URL，由于其他索引包含其他值，因此会发生错误。在正确的代码下面。

<p>
    <script type="text/javascript">
    
        function dosearch() {

		var urlSubmit = "https://catalog.mainlib.org/search/searchresults.aspx?ctx=31.1033.0.0.6&type=Keyword";
        
        var sf=document.catalogSearch;
        
		if(sf.keyword.value!=""){
			urlSubmit += "&term=" + escape(sf.keyword.value);
		}
		if(sf.sengines.selectedIndex > 0){
			urlSubmit += "&by=" + sf.sengines.options[sf.sengines.selectedIndex].value;
		}
		               
        window.location.href = urlSubmit;
        
        return false;
        
        }
    </script>
    </p>
<div class="floatright headerright">
<div class="top_search">
<div class="searcht">
<ul>
<li><a class="selected" href="#searchtab1">Search Catalog</a></li>
<li><a href="#searchtab2" class="">Search Databases</a></li>
<li><a href="#searchtab3" class="">Search Website</a></li>
</ul>
<div id="searchtab1" style="display: block;">
<form name="catalogSearch"  id="catalogSearch" target="_blank" onsubmit="return dosearch()"class="searchform">
<input type="text"  name="keyword" type="text" placeholder="Search" value=""/>
<select class="catalogselect" name="sengines"id="SearchBy">
<option selected="selected" value="" target="_blank">Any Field</option>
<option value="TI">Title</option>
<option value="AU">Author</option>
<option value="SU">Subject</option>
<option value="NOTE">General notes</option>
<option value="PUB">Publisher</option>
<option value="GENRE">Genre</option>
<option value="SE">Series</option>
<option value="ISBN">ISBN</option>
<option value="ISSN">ISSN</option>
<option value="LCCN">LCCN</option>
<option value="PN">Publisher No.</option>
<option value="SUDOC">SuDoc</option>
<option value="CODEN">CODEN</option>
<option value="STRN">STRN</option>
</select><input type="submit" name="btnG" class="searchsubmit" value="Go" /></form></div>
</div>
</div>
<div id="searchtab2">
    <form class="searchform" action="https://roxburylibrary.org/collections-resources/databases/" method="POST">
 <select name="subjectid" class="databaseselect">
                      <option class="inputbox2" value="business-resources"  >Business Resources</option>
            <option class="inputbox2" value="ematerials-ebooks-audio-books-videos"  >eMaterials - eBooks, Audio Books, Videos</option>
            <option class="inputbox2" value="health-and-science-resources"  >Health and Science Resources</option>
            <option class="inputbox2" value="history-and-geneaology-resources"  >History and Geneaology Resources</option>
            <option class="inputbox2" value="job-and-career-help"  >Job and Career Help</option>
            <option class="inputbox2" value="languages"  >Languages</option>
            <option class="inputbox2" value="literature-resources"  >Literature Resources</option>
            <option class="inputbox2" value="magazines-newspapers"  >Magazines &amp; Newspapers</option>
           </select>
 <input class="searchsubmit" type="submit" value="Go"/>
 <input type="hidden" name="catsearch" value="1"/>
</form>
</div>
<div id="searchtab3">
    <p>
         <script type="text/javascript">
            function dosearchweb() {      
            var sf=document.websearch;
            var submit = sf.sengine.options[sf.sengine.selectedIndex].value + escape(sf.keyword.value);        
            window.location.href = submit;
            return false;
            }
                </script>
                </p>
    <form name ="websearch"class="searchform" target="_blank" onsubmit="return dosearchweb()" name="sengine">
        <input type="text" name="keyword" type="text" placeholder="Search this Website..." value="" target="_blank" />
        <select class="catalogselect" name="sengine"id="SearchBy">
        <option selected="selected" value="https://roxburylibrary.org//?s=" target="_blank"></option>
        <input type="submit" class="searchsubmit" value="Go" />
    </form>
</select>
</div>
</div>

</div>