Google 搜索栏 - 通过输入复选框添加自定义搜索文本

Question

我正在尝试在单击复选框时将自定义搜索文本添加到 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>

它位于结束正文标签的正上方。

将复选框中的文本附加到文本区域的函数

$("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 Fiddle - https://jsfiddle.net/2pdkv6ph/1/

Answer 1

您的代码有几个问题。首先，$(this).val() 不是复选框后面的跨度文本。您需要遍历 DOM 才能找到它。

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

其次，您清除文本框然后尝试评估文本框中的文本的顺序是倒序的（您不能先清除它然后检查它以查看 "old" 文本的内容是因为你刚刚清除了它）。

一种更简单的方法是使用一个数组，当复选框被选中时，将 span 的文本推送到该数组。在循环之后，将数组转换为逗号分隔的字符串并将该值分配给文本框。

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(", ");
}

注意：我不完全清楚您输入 id="text" 与 Google 搜索输入相关的目的是什么。所以，我已经展示了如何将跨度文本分配给两者。

这是一个 Fiddle 演示：https://jsfiddle.net/zephyr_hex/g97rzy2e/2/

Google 搜索栏 - 通过输入复选框添加自定义搜索文本

Google search bar - add custom search text thru input checkbox

html

javascript

jquery

google-search-api