Reco Everything you wanna value. 자세히보기

[IT|Programming]/HTML related

구글 검색 바로 할 수 있게 input 및 button 만들기

kipid 2023. 12. 28. 16:14
반응형
m.logPrint() is working!

<eq> and <eqq> tags are rendered to MathJax format, being enclosed by \ ( \ ) and \ [ \ ].

docuK1 scripts started!
If this log is not closed automatically, there must be an error somewhere in your document or scripts.

Table of Contents is filled out.

Auto numberings of sections (div.sec>h2, div.subsec>h3, div.subsubsec>h4), <eqq> tags, and <figure> tags are done.

<cite> and <refer> tags are rendered to show bubble reference.

<codeprint> tags are printed to corresponding <pre> tags, only when the tags exist in the document.


Current styles (dark/bright mode, font-family, font-size, line-height) are shown.

kakao.js with id="kakao-js-sdk" is loaded.

New ShortKeys (T: Table of Contents, F: Forward Section, D: Previous Section, L: To 전체목록/[Lists]) are set.

m.delayPad=512;
m.wait=1024;
wait 1171ms.
▼ Hide
Toggle a mess
Go (FS)
TofC
DocuK Log
Backward
Forward
RRA
Lists
CmtZ
CmtX
Handle CmtZ
Log in
out focus
이 글이 도움이 되셨다면, 광고 클릭 한번씩만 부탁드립니다 =ㅂ=ㅋ.
(If this article was helpful, please click the ad once. Thank you. ;)
Mode: Bright; Font: Noto Sans KR; font-size: 18.0px (10.0); line-height: 1.6;
width: 1280, height: 720, version: 3.3.3
Canonical URI: https://kipid.tistory.com/entry/구글-검색-바로-할-수-있게-input-및-button-만들기
dg:plink (Document Global Permanent Link): https://kipid.tistory.com/317
document.referrer: Empty
This document is rendered by docuK (See also SEE (Super Easy Edit) of docuK and pure SEE).

구글 검색 바로 할 수 있게 input 및 button 만들기

TPH1.Posting History

▼ Show/Hide

T1.구글 검색

▼ Show/Hide
구글 검색은 http://www.google.com/search?q=soccer 형태로 이루어진다. "q=검색하고 싶은 문구" 를 넣으면 되는거 같으니 다음과 같이 만들어 봅시다.
Google Search

T1.1.Code

HTML 과 Javascript 는 다음과 같음.
<textarea id="textarea-google-search" style="font-size:1em; font-family:'맑은 고딕'; width:100%; height:2em; background:white; color:black"></textarea>

<div class="button fRight" onclick="m.googleSearchThis()">Google Search</div>

<script>
m=window.m||{};
m.googleSearchThis=function () {
	let searchVar=encodeURIComponent($("#textarea-google-search")[0].value);
	window.open(`http://www.google.com/search?qt=${searchVar}&q=${searchVar}`, "_blank");
};
</script>

T1.2.Using form submit

<form id="form-gs" action="http://www.google.com/search" method="get" target="_blank">
	<input type="text" name="q"/>
	<input type="hidden" name="qt"/>
	<input id="form-submit-gs" type="submit" value="Google Search"/>
</form>

<script>
$form_gs=$("#form-gs");
$form_gs.on("submit", function (e) {
	e.preventDefault();
	$form_gs.find("input[name=qt]").val($form_gs.find("input[name=q]").val());
	$form_gs[0].submit();
});
</script>
▲ Hide

TRRA1.References and Related Articles

▼ Show/Hide
  1. Ref. [01] https://inpa.tistory.com/ 에서 검색 구현해 놓으신 것 참고했음.
▲ Hide
Toggle a mess
* 홍보/Promoting Recoeve.net (3S | Slow/Sexy/Sincere SNS)
유튜브 음악, K-Pop MV 들을 광고없이 목록재생 해서 보세요.
접속하셔서 가입 후 별점만 드레그 하시면 자신의 페이지에 저장 됩니다.
그리고 자신의 페이지로 이동한 뒤 추천 받기 (단축키 R) 를 누르시면 자신이 점수 메긴것들로 이웃 (이웃보기 단축키 B) 을 자동으로 찾아주고 그 이웃들로부터 추천을 받을 수 있습니다.
Toggle a mess
이 글이 도움이 되셨다면, 광고 클릭 한번씩만 부탁드립니다 =ㅂ=ㅋ.
(If this article was helpful, please click the ad once. Thank you. ;)
반응형