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

【问题标题】：Google search bar - add custom search text thru input checkboxGoogle 搜索栏 - 通过输入复选框添加自定义搜索文本
【发布时间】：2017-11-07 20:33:44
【问题描述】：

我正在尝试在单击复选框时将自定义搜索文本添加到谷歌搜索栏，并在删除该复选框时删除所述文本。我已经想出了如何在文本区域中添加/删除文本以及如何将自定义文本放在搜索栏中，但是我在弄清楚如何用文本替换搜索栏中的自定义文本时遇到了一些困难单击这些复选框时的复选框。

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>

它位于结束 body 标记的正上方。

将文本从复选框附加到文本区域的功能

$("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/

【问题讨论】：

在捕获“旧”文本之前，您将元素中的文本设置为 ''。另外，你想在这里测试什么？ ` $('#text').text() ? $('#text').text() + ', ' : ''`
我正在将文本添加到文本框，但想将其添加到自定义谷歌搜索栏。我没有发任何短信 - 只需要弄清楚如何将文本添加到适当的位置
我了解您的最终目标。我在问你想用那一行代码做什么：$('#text').text() ? $('#text').text() + ', ' : ' 因为那行代码可能没有检查你认为的条件。另外，为什么在该行代码之前将 $('#text') 元素的值设置为''？您正在清除文本，然后尝试捕获该元素的值。那是倒退。
我在教程中找到了代码 - cmsdk.com/javascript/…。
我在教程中找到了代码 - cmsdk.com/javascript/…。据我所知 - 如果单击的复选框被选中，它要么从复选框中的值文本添加文本 (value="X")，要么如果单击的复选框未选中，则删除文本。

标签： javascript jquery html google-search-api

【解决方案1】：

您的代码有几个问题。首先，$(this).val() 不是复选框后面的 span 文本。您需要遍历 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(", ");
}

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

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

【讨论】：

感谢您的帮助。最终产品中不需要文本框，但我把它放在那里以显示需要什么。同样在您的 jsfiddle 中，似乎无论在“值 1”上选中哪个复选框都会添加。这是有原因的吗？
@ChriChri ：因为您给出的示例将“值 1”作为每个跨度的文本。如果您想要其他内容，请更改 HTML，以便跨度具有不同的文本。
再次感谢您-我忘了我还没有更新。