본문 바로가기

[IT/Programming]/HTML related

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

728x90
반응형
# 구글 검색 바로 할 수 있게 input 및 button 만들기 ## PH
  • 2023-12-28 : First posting.
## TOC ## 구글 검색 구글 검색은 http://www.google.com/search?q=soccer 형태로 이루어진다. "q=검색하고 싶은 문구" 를 넣으면 되는거 같으니 다음과 같이 만들어 봅시다.
Google Search
### Code HTML 과 Javascript 는 다음과 같음. ```[.linenums.lang-html] <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> ```/ ### Using form submit
```[.linenums.lang-html] <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> ```/ ## RRA
  1. https://inpa.tistory.com/ 에서 검색 구현해 놓으신 것 참고했음.
728x90
반응형