谷歌搜索栏 - 通过输入复选框添加自定义搜索文本 - Google search bar - add custom search text thru input checkbox 小贝子编程网

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

.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小提琴 - https://jsfiddle.net/2pdkv6ph/1/

你的代码有几个问题。首先，$(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(", ");
}

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

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

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

相关内容

最新更新

热门标签：