Search code examples
javascriptjqueryjquery-uiautocompletequaltrics

Implementing jQuery autocomplete in Qualtrics

I'm trying to implement an autocomplete text box for a question in my Qualtrics survey using jQuery. I realize this question was already asked/answered in another question(using jQuery for autocomplete in Qualtrics) on stackoverflow, but I tried following their solution and it did not work for me. (and I don't have enough rep points to comment on that question :(

The sample code I'm using is from http://jqueryui.com/autocomplete; I copied this code into the look & feel section of Qualtrics:

    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
    <script>$.noConflict();</script>
    <script>
    $(function() {
    var availableTags = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"
    ];
    $("#tags").autocomplete({source: availableTags});
    });
    </script>

and put the code below into the body of the question:

    jQuery(function() {
        jQuery( "#tags" ).autocomplete({source: availableTags});
    });

I tried changing the selector from the sample code and the question body code to ('#QID15 .InputText), but that did not do anything.

Javascript and jQuery are uncharted territory for me and I do not know what to try next. What am I missing with this script?

Solution

  • I'm not sure why you are doing the $.noConflict(). Also, you seem to be all over calling the jQuery library; sometimes using "$" and sometimes "jQuery". Also, if you are putting things in the <head> you should use $(document).ready();. Let's simplify...

    <head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script>
<script>
$(document).ready( function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$("#tags").autocomplete({source: availableTags});
});
</script>
</head>
<body>
    <input type="text" value="" id="tags" />
</body>
</html>

    You're really going to want some style on that, but it should get you started.