JS - 여러 검색 옵션을 사용하여 검색 양식을 만드는 방법

이 방법은 대부분의 검색 엔진에서 사용되는 쿼리 문자열을 활용합니다. 쿼리 문자열은 검색이 수행될 때 일반적으로 물음표 뒤에 오는 URL의 일부입니다. 예를 들어 구글에서 "야호"를 검색하면 주소 표시줄의 URL이 다음과 같이 변경되는 것을 볼 수 있습니다.

https://www.google.com/search?q=야호

다른 것들도 많이 있지만 이것이 중요한 부분입니다. 검색 양식은 사용자의 검색어를 선택한 검색 엔진의 URL에 추가하는 방식으로 작동합니다.

1단계 - 검색 엔진 URL 목록

우선 어떤 검색 엔진을 포함할지 결정해야 합니다. 쿼리 문자열을 사용하는 검색 엔진만 사용할 수 있으므로 각 검색 엔진이 이를 수행하는지 확인해야 합니다. 여러분이 해야 할 일은 검색을 수행하고 URL에 어떤 일이 일어나는지 확인하는 것뿐입니다. 검색어가 URL에 표시되면 이 검색 엔진을 사용할 수 있습니다.

다음으로, 각 검색 엔진에 대해 쿼리 문자열이 어떻게 구성되어 있는지 정확히 알아보세요. 검색을 수행한 다음 검색어가 나타나는 지점까지 전체 URL을 복사하세요. 그러면 다음과 같은 목록을 얻을 수 있습니다.

https://www.google.com/search?q=
https://search.yahoo.com/search?p=
https://search.naver.com/search.naver?here=nexearch&sm=top_hty&fbm=0&ie=utf8&query=
https://search.daum.net/search?w=tot&DA=UME&t__nil_searchbox=suggest&sug=&sugo=14&&o=1&q=

2단계 - 검색 양식

아래 코드는 검색 양식을 구성합니다. 이를 웹 페이지에 복사하고 목록의 검색 URL을 옵션 값으로 삽입합니다(각 옵션에 대해 하나의 검색 엔진).

<form name="searchform" onSubmit="return dosearch();">
Search:
<select name="sengines">
<option value="https://www.google.com/search?q=" selected>구글</option>
<option value="https://search.yahoo.com/search?p=">야후</option>
<option value="https://search.naver.com/search.naver?where=nexearch&sm=top_hty&fbm=0&ie=utf8&query=">네이버</option>
<option value="https://search.daum.net/search?w=tot&DA=UME&t__nil_searchbox=suggest&sug=&sugo=14&&o=1&q=">다음</option>
</select>
For:
<input type="text" name="searchterms">
<input type="submit" name="SearchSubmit" value="Search">
</form>

3단계 - JavaScript 함수

마지막으로 페이지 헤드에 다음 자바스크립트를 삽입합니다.

<script type="text/javascript">
function dosearch() {
var sf=document.searchform;
var submitto = sf.sengines.options[sf.sengines.selectedIndex].value + escape(sf.searchterms.value);
window.location.href = submitto;
return false;
}
</script>

참고: 검색 결과 페이지를 새 창에서 여는 방법:
window.location.href = submitto; 줄을 지우고 window.open(submitto); 로 바꾸세요.

출처: https://www.mediacollege.com/internet/javascript/form/multi-search.html