공부를/Spring Framework

[Spring] 구글 검색 api 활용 - 구글 검색창과 홈페이지 검색창에 동시 입력

개발자를 꿈꾸는 유자c 2018. 11. 27. 11:49

지금 프로젝트로 만들고 있는 홈페이지의 검색창에 

' java '란 단어를 넣으면 

구글 검색 api로 가져온 검색창에도 'java'가 동시에 입력됐으면 하는 생각에 



<script>

 $('#mainSearchBox').change(function(){

     메인 검색창 <input> id 


$('#     ').val($(this).val());

구글 검색창 id

});

</script>


필요한 것은 메인 검색창의 id와 구글 검색창의 id 였는데 



구글 검색창은

<script>

(function() {

var cx = '';

var gcse = document.createElement('script');

gcse.type = 'text/javascript';

gcse.async = true;

gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;

var s = document.getElementsByTagName('script')[0];

s.parentNode.insertBefore(gcse, s);

})();

</script>


이런식이면 생성되기 때문에 id가 없어 

어떤식으로 id를 만들어야 하나 걱정했다.


gcse.id = 'gSearchBox';


이런식으로 코드를 추가해줘도 먹지 않아서 걱정했는데

의외로 손 쉽게 해결됐다.



개발자 도구에서 검사로 확인해보니 

내가 쓴 코드에는 없었지만 자동으로 생성되는 요소들이 많았고

그 중에 id도 있었다ㅎㅎ


그래서 javascript에 id 넣어주니 

메인 검색창과 구글 검색창 양쪽에 뿅!!!