JQuery Получить значение встроенного виджета Автозаполнение текста - PullRequest
0 голосов
/ 03 октября 2018

Я встроил виджет в свой сайт, предоставленный сторонним сайтом, этот виджет отображает поле ввода, которое автоматически предлагает пользователю текст при вводе.

Это то же самое, что и поиск Ask Your Question на этой странице .

Я встраиваю виджет, включив файл 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).Я не могу контролировать работу виджета.

Я пытаюсь зафиксировать значение выделенного текста, но не знаю, как это сделать?

Причина, по которой я хочу это сделатьпоэтому я могу отправить его в Google Tag Manager, используя dataLayer.push({})

Я пробовал это, но это не работает;

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

Любой совет приветствуется.

Ответы [ 2 ]

0 голосов
/ 04 октября 2018

Я быстро взглянул на код на странице, и я думаю, что вы можете использовать этот фрагмент кода на своей странице.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");
}

});

Если у меня есть сообщение «alert», вы бы заменили его нажатием GTL dataLayer, чтобы получить эту информацию вGTM / GA.

0 голосов
/ 03 октября 2018

Можете ли вы попробовать это:

$('#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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...