带有输入键并在新选项卡中打开的 JavaScript 搜索表单

Question

我尝试用多个 URL 修改一些搜索表单脚本， 一切正常，但我希望能够为此搜索表单激活“输入键”按钮和“在新选项卡中打开”。 对此有何解决方案/建议？

谢谢，

function startSearch(){
searchString = document.searchForm.searchText.value; 
if(searchString != ""){
searchEngine = document.searchForm.whichEngine.selectedIndex + 1;
finalSearchString = "";

if(searchEngine == 1){
finalSearchString = "https://perpus.or.id/?post_types=&s=" + searchString;
}
if(searchEngine == 2){
finalSearchString = "https://brwa.or.id/search?q=" + searchString;
}
if(searchEngine == 3){
finalSearchString = "https://madaniberkelanjutan.id/hasil-pencarian/" + searchString;
}
if(searchEngine == 4){
finalSearchString = "https://jkpp.org/?s=" + searchString;
}
if(searchEngine == 5){
finalSearchString = "https://www.econusa.id/id/search?search_flag=1&txtsearch=" + searchString + "&x=0&y=0";
}
if(searchEngine == 6){
finalSearchString = "https://www.aman.or.id/?s=" + searchString;
}

location.href = finalSearchString;
}

}

<form name="searchForm" target="_blank" method="get">

<table align="center" border cellpadding=3 cellspacing=2 >

<td ><input style="background: none" name="searchText" type="text" placeholder="Search Keyword...">
<td >
<select style="background: 000000" name="whichEngine" type="radio">
<option selected>Perpustakaan
<option>BRWA
<option>Madani Berkelanjutan
<option>JKPP
<option>Econusa
<option>AMAN
</select>
<td bgcolor=navajowhite><input type="button" value="Search" onClick="startSearch()" formtarget="_blank">
</select>
</table>
</form>

Answer 1

Onkey enter 试试这个：

function runOnEnter(e){
    if(e.keyCode === 13){
        e.preventDefault(); // Ensure it is only this code that runs

        startSearch();
    }
}

<td bgcolor=navajowhite><input type="button" value="Search" 
 onkeypress="runOnEnter(event)"
 onClick="startSearch()" formtarget="_blank">

并尝试在新标签中打开：

window.open(finalSearchString, '_blank');

Answer 2

获取搜索文本

你应该得到这样的搜索文本

searchString  = document.querySelector('[name="searchText"]').value

获取引擎

你应该得到这样的搜索引擎索引

searchEngine  = document.querySelector('[name="whichEngine"]').value

关闭选项标签并添加值属性

同时关闭选项标签并将值属性添加到您的选项标签中，例如

<option value="1">BRWA</option>

如果你很懒，请执行以下操作：

<option value="https://brwa.or.id/search?q=">BRWA</option>

（对其他选项执行此操作）

然后在 startSearch() 中执行以下操作：

function startSearch(){
   searchString  = document.querySelector('[name="searchText"]').value
   searchEngine  = document.querySelector('[name="whichEngine"]').value
   finalSearchString = searchEngine + searchString;
   window.open(finalSearchString, "_blank");  // This opens in new tab
}

你的完整代码会是这样的

function startSearch(){
   searchString  =     document.querySelector('[name="searchText"]').value
   searchEngine  = document.querySelector('[name="whichEngine"]').value
   finalSearchString = searchEngine + searchString;
   window.open(finalSearchString, "_blank");  // This opens in new tab
}

<form name="searchForm" target="_blank" method="get">

<table align="center" border cellpadding=3 cellspacing=2 >

<td ><input style="background: none" name="searchText" type="text" placeholder="Search Keyword...">
<td >
<select style="background: 000000" name="whichEngine" type="radio">
<option value="https://perpus.or.id/?post_types=&s=" selected>Perpustakaan</option>
<option value="https://brwa.or.id/search?q=" >BRWA</option>
<option value="https://madaniberkelanjutan.id/hasil-pencarian/" >Madani Berkelanjutan</option>
<option value="https://jkpp.org/?s=" >JKPP</option>
<option value="https://www.econusa.id/id/search?search_flag=1&txtsearch=" >Econusa</option>
<option value="https://www.aman.or.id/?s=" >AMAN</option>
</select>
<td bgcolor=navajowhite><input type="button" value="Search" onClick="startSearch()" formtarget="_blank">
</select>
</table>
</form>