Qualtrics 中的 Javascript 自动完成功能无法在问题下方显示答案

【问题标题】：Javascript autocomplete in Qualtrics fails to show below the questionQualtrics 中的 Javascript 自动完成功能无法在问题下方显示
【发布时间】：2020-07-23 04:30:02
【问题描述】：

我已经实现了以下 javascript 代码，以在 Qualtrics 的文本字段问题中使用自动完成功能。

Qualtrics.SurveyEngine.addOnReady(function()
{
    var textOptions = [

        "Adam", "Athelney", "Baring"

];
    jQuery('.QR-' + this.questionId).autocomplete({
        source: textOptions,
        minLength: 3
    });

});

代码有效；但是，自动完成建议出现在页面末尾（在“由 Qualtrics 提供支持”URL 链接下方）。见第一张截图：

我不确定这是否是 Qualtrics 中的错误；但是，我已经在另一所大学提供的帐户上测试了相同的代码（请参见下面的第二个屏幕截图），其中相同的代码按预期工作（建议出现在问题的正下方，而不是页面的末尾）所以我我对这种行为感到困惑。

任何想法可能导致此行为以及如何解决它？（这两个示例都没有使用任何自定义 CSS 等，但它们是托管在两所不同大学的帐户）谢谢。

【问题讨论】：

使用的主题有所不同。有效的示例类似于具有平面布局的空白动态主题。
@T.Gibbons 你好。不，事实并非如此。我已经测试了所有可用的布局，但没有任何效果。为了澄清，我还更新了问题以表明无论选择何种布局都会发生这种情况（以前的布局只是为了节省空间）。到目前为止，我认为这是 Qualtrics 的问题。
不，这是一个 CSS 问题。如果您没有任何自定义 CSS，那么这是两个帐户之间的主题不同。使用浏览器的检查功能找出不同之处。
正在运行的显示这个 CSS 路径：html.JFEScope body#SurveyEngineBody ul#ui-id-5.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front 不工作的显示这个 CSS 路径：html.JFEScope body#SurveyEngineBody ul#ui-id-1.ui-autocomplete.ui-front.ui-menu.ui-widget.ui-widget-content 只是顺序不同。是否可以以某种方式将一个主题复制到另一个主题？不幸的是，我不确定在 CSS 级别上该做什么......

标签： javascript jquery autocomplete qualtrics

【解决方案1】：

有点晚了，但是 jquery 自动完成在父元素上查找 .ui-front；如果未设置，则需要在自定义 js 代码中使用 appendTo 选项 explicitly add a selector 解决该问题。

var yourSourceList = ['foo', 'bar', 'baz'],
    $elem = jQuery('.QR-'+this.questionId),
    $elemParent = $elem.parent();
            
jQuery($elem).autocomplete({ 
    source: yourSourceList,
    minLength:3,
    appendTo: $elemParent
});

【讨论】：

【解决方案2】：

根据上面的评论，将 CSS html.JFEScope body#SurveyEngineBody ul#ui-id-5.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front 规则从工作版本复制到非工作版本的 Look&Feel>Custom CSS。重要的部分是规则的内容。大概他们是不同的。

虽然类的顺序不同，但两个选择器之间的唯一区别是 ul 元素的 id。确保您使用正确的 id（这两个调查中的 ID 可能不同）。

【讨论】：