JQuery Получить значение автозаполнения текста встроенного виджета
Я встроил на свой сайт виджет, предоставленный сторонним сайтом, этот виджет отображает поле ввода, которое автоматически предлагает пользователю текст при вводе.
Это то же самое, что и поиск 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 с помощью dataLayer.push({}).
Я пробовал это, но это не работает;
$('#search-query-5032_list li').on('click', function() {
alert($(this).text());
});
Любой совет приветствуется.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Можете ли вы попробовать это:
$('#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>хм, вы тогда не предоставили нам правильную информацию. вы пробовали этот образец?
хм, как вы можете видеть, в моем примере это просто, важно, чтобы у вас был правильный идентификатор ul, а также была правильная ссылка на библиотеку jquery. Мой образец здесь показывает значение ul li во всплывающем окне, не так ли? если есть, то у вас есть еще одна проблема, почему i3t не работает на ваших сторонах, мы этого не видим?
Я понимаю вашу логику, и если бы код не был встроенным виджетом, я уверен, что ваш пример кода будет работать. Однако код, который я использую, представляет собой динамически добавляемый виджет, имеет ли это значение?
да, может быть разница, читали ли вы о настройке виджетов в этом случае, может быть, вам нужно что-то еще сделать, некоторые дополнительные шаги для настройки, кроме написания нескольких строк js?
Я быстро просмотрел код на странице и думаю, что вы можете использовать этот фрагмент кода на своей странице. 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.info("empty");
}
});
Там, где у меня есть «предупреждение», вы должны заменить его push-уведомлением уровня данных GTM, чтобы получить эту информацию в GTM / GA.
Спасибо за помощь @XTOTHEL, но он не работает. Я не использую никакого кода запуска, я просто включаю файл widget.js (который выглядит как pastebin.com/wjHGjggw), а затем вставляю одну строку html <div id = "widget-5032"></div>.
@TheOrdinaryGeek Я внес изменения, я основал свое решение на рабочем примере здесь: aclib.us
Еще раз спасибо @XTOTHEL, но теперь я получаю ошибки (index):608 Uncaught TypeError: Cannot read property 'search' of undefined и Uncaught ReferenceError: searchform_5032 is not defined. Я продолжу пробовать, основываясь на вашем образце :)
Какую службу вы используете для автопредложений?