代码之家 › 专栏 › 技术社区 › TheOrdinaryGeek

jquery获取嵌入小部件自动完成文本的值

google-tag-manager html jquery javascript

TheOrdinaryGeek · 技术社区 · 6 年前

我已经在第三方站点提供的站点中嵌入了一个小部件,这个小部件显示一个输入框,在输入时自动向用户建议文本。

它和 Ask Your Question 搜索 this page .

我通过包含 widget.js 文件在我的文档中 <head> ,并用HTML调用它;

<div id="widget-5032"></div>

当我检查小部件的HTML时,我看到以下内容(示例项目列表);

<div>
    <ul id="search-query-5032_list">
        <li data-question="Alaska">Alaska</li>
        <li data-question="Hawaii">Hawaii</li>
        <li data-question="etc.">etc.</li>
    </ul>
</div>

自动建议是从第三方网站提供的,当单击一个时,输入将填充建议的文本,页面将自动重定向到外部网站(无需单击 search 按钮)。我无法控制小部件的工作方式。

我试图捕获所选文本的值,但不确定如何捕获?

我之所以要这样做,是因为我可以使用 dataLayer.push({})

我试过了,但没用;

$('#search-query-5032_list li').on('click', function() {
    alert($(this).text());
});

感谢您的任何建议。

2 回复 | 直到 6 年前

XTOTHEL 6 年前

我快速查看了页面上的代码,我认为您可以在页面上使用这段代码。Try/Catch非常重要,因为只有在选中某个项时才创建隐藏的输入。

springSpace.la.widget_5032_inst.search.autocomplete.input.parentNode.addEventListener('click', function(){

try {
    alert(searchform_5032.form.querySelector('input[name=faqid]').value);
}
catch(err) {
    console.log("empty");
}

});

在我收到“警报”消息的地方,您将替换为GTM数据层push以将该信息输入GTM/GA。

-1

Nezir 6 年前

你能试试这个吗?

$('#search-query-5032_list').on('click', 'li', function(){
    alert($(this).text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group">
    <ul id="search-query-5032_list">
        <li data-question="Alaska">Alaska</li>
        <li data-question="Hawaii">Hawaii</li>
        <li data-question="etc.">etc.</li>
    </ul>
</div>