Google 검색 창 - 입력란에 맞춤 검색 텍스트 추가

확인란을 선택하면 Google 검색 창에 맞춤 검색 텍스트를 추가하려고 시도하고이를 제거하면 해당 텍스트를 삭제하려고합니다. 텍스트 영역에 텍스트를 추가/제거하는 방법과 검색 막대에 사용자 지정 텍스트를 넣는 방법을 알아 냈습니다. 그러나 검색 막대의 사용자 지정 텍스트를 텍스트 상자에있는 텍스트로 바꾸는 방법을 찾는 데 어려움이 있습니다. 확인란을 클릭하면Google 검색 창 - 입력란에 맞춤 검색 텍스트 추가

HTML은

<body> 
    <div id="content"> 
     <div id="search"> 
<gcse:search></gcse:search> 
      <div class="check_content"> 
      <div class="checkbox"> 
       <input type="checkbox" value="Value 1" id="checkbox1" name="checkbox" /> 
       <label for="checkbox1" ></label> 
      </div> 
       <span>Value 1</span> 
      </div> 
      <div class="check_content"> 
      <div class="checkbox"> 
       <input type="checkbox" value="Value 2" id="checkbox2" name="checkbox" /> 
       <label for="checkbox2" ></label> 
      </div> 
       <span>Value 1</span> 
      </div> 
      <div class="check_content"> 
      <div class="checkbox"> 
       <input type="checkbox" value="Value 3" id="checkbox3" name="checkbox" /> 
       <label for="checkbox3" ></label> 

       </div> 
       <span>Value 1</span> 
      </div> 

     </div> 
     <textarea id="text"></textarea> 
     </div> 

<strong>Google Search Bar with Custom Text</strong> 

<script> 
    (function() { 
    var cx = '014565979167738564771:fixr4qj_zfs'; 
    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); 
    })(); 

    window.onload = function(){ 
     document.getElementById('gsc-i-id1').placeholder = 'This is custom text'; 
    }; 
</script>

이 바로 폐쇄 체 태그를 배치한다. https://jsfiddle.net/2pdkv6ph/1/

출처

2017-11-07 ChriChri

당신은 요소의 텍스트를 설정하는에 '' '' "오래된"텍스트 촬영을. 또한, 여기서 무엇을 시험하려고합니까? '$ ('# text'). 텍스트()? –

텍스트를 텍스트에 추가하고 있지만 사용자 정의 Google 검색 창에 추가하고 싶습니다. 나는 문자를 보내지 않고 있습니다 - 텍스트를 적절한 위치에 추가하는 방법을 알아야합니다. – ChriChri

나는 당신의 궁극적 인 목표를 이해합니다. 그 한줄의 코드로 당신이 무엇을하려하는지 묻고있었습니다 :'$ ('# text'). text()? $ ('# text'). text() + ',': ''그 코드 행은 아마 당신이 생각하는 상태를 검사하지 않기 때문입니다. 또한, 왜 그 코드 줄 앞에 $ ('text') 요소의 값을''''로 설정하고 있습니까? 텍스트를 삭제 한 다음 해당 요소의 값을 캡처하려고합니다. 그것은 거꾸로입니다. –

당신은 당신의 코드에 몇 가지 문제가있다 -

$("input[name=checkbox]").change(function() { 
    updateAllChecked(); 
}); 

function updateAllChecked() { 
    $('#text').text(''); 
    $("input[name=checkbox]").each(function() { 
    if (this.checked) { 
     let old_text = $('#text').text() ? $('#text').text() + ', ' : ''; 
     $('#text').text(old_text + $(this).val()); 
    } 
    }) 
}

텍스트 영역에 체크 박스의 텍스트를 추가

기능 또한 JS 바이올린을 포함했다. 첫째, $(this).val()은 확인란에 이어지는 범위의 텍스트가 아닙니다. 찾으려면 DOM을 탐색해야합니다. 무엇을 "오래된"텍스트를 볼 수를 검사 한 후

$(this).parent('div').parent('div').find('span').text();

둘째, 순서있는 당신이 텍스트 상자를 삭제 한 후 텍스트 상자의 텍스트를 평가하기 위해 노력하고 거꾸로이다 (당신이 할 수있는 그것을 명확하지 당신이 방금 그것을 정리했기 때문입니다).

간단한 방법은 배열을 사용하는 것이고 확인란을 선택하면 범위 텍스트를 배열로 푸시합니다. 루프가 끝나면 배열을 쉼표로 구분 된 문자열로 변환하고 해당 값을 텍스트 상자에 할당합니다.

function updateAllChecked() { var myArray = []; $("input[name=checkbox]").each(function() { if (this.checked) { var spanText= $(this).parent('div').parent('div').find('span').text(); myArray.push(spanText); } }); $('#text').text(myArray.join(", ")); //then assign to the Google text box? document.getElementById('gsc-i-id1').value = myArray.join(", "); }

참고 : Google 검색 입력과 관련하여 id = "text"로 입력 한 목적이 무엇인지 분명하지 않습니다. 그래서, 양쪽 모두에 스팬 텍스트를 할당하는 방법을 보여 줬습니다.

가 여기에 바이올린 데모입니다 : https://jsfiddle.net/zephyr_hex/g97rzy2e/2/

출처

2017-11-07 21:33:49

도움 주셔서 감사합니다. 텍스트 상자는 최종 제품에는 필요하지 않지만 필요한 곳에 표시하기 위해 텍스트 상자를 배치했습니다. 또한 jsfiddle에서 "값 1"에 어떤 체크 박스가 선택되어 있더라도 상관없는 것처럼 보입니다. 그 이유가 있을까요? – ChriChri

@ChriChri : 당신이 준 예제가 각 범위의 텍스트로 "값 1"을 가지고 있기 때문입니다. 다른 것을 원한다면, span이 다른 텍스트를 갖도록 HTML을 변경하십시오. –

다시 한 번 감사드립니다 - 나는 그것을 업데이트하지 않았다는 것을 잊었습니다. – ChriChri

Google 검색 창 - 입력란에 맞춤 검색 텍스트 추가

답변

관련 문제