jQuery Autocomplete: How to add scroll and allow user to use spacebar to search among text options? | XM Community
Solved

jQuery Autocomplete: How to add scroll and allow user to use spacebar to search among text options?

  • 1 November 2019
  • 3 replies
  • 649 views
D
Hello,
I'm trying to make an easy way for respondents to find their job using jQuery Autocomplete, and have been able to get it to work using this excellent thread.

However the list I'm using for automcomplete suggestions contains about 7000 employments which creates problems of specificity. I want the respondent to be able to write "nurse orthop" and that the option "Orthopedic Nurse Practitioner" shows up. As of now, if words are written in the wrong order nothing shows up.

The survey will be in Swedish where long compund words are common, like in German. I want the spacebar to not signify word order but rather that jQuery uses the spacebar to broaden the search. For example we have a job title which is litterally "Flightcruisedirector" in one word. So I want the respondent to be able to write "direct cruise flight" and still be able to see the definition "Flightcruisedirector" come up as a suggestion. Which would mean that the spacebar would signify that any character can come before or after each of the respondents keywords and that the order of the words is not taken into account when autocomplete makes a list of options.

The second problem is a little simpler. I want the respondent to be able to scroll when several options are shown, as demonstrated here, but I can't get it to work.

Right now my code looks like this:

Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
var textOptions = [
"3D-designer",
"Abonnemangsförsäljare",
"Abonnemangskontorist",
"Abonnentingenjör, vatten o. avlopp",
"Abonnentman",
"Account manager",
"Accounting controller",
"Ackompanjatör, klassisk musik",
"Ackompanjatör, populärmusik",
"[7000 other jobs]",
"Överåklagare",
];
jQuery('.InputText').autocomplete(
{source:textOptions,
minLength:3});
});

(I've also inserted this header as suggested in the thread mentioned above)
``<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>``

Thanks!

Daniel
icon

Best answer by DanielE 9 December 2019, 17:03

View original

3 replies

D
Hello again,
I figured out how to make the suggestion window a scroll-compatible window.

This goes into the Look and Feel -> Style -> Custom CSS window:

.ui-autocomplete {
max-height: 150px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete {
height: 150px;
}

However, I would still appreciate help with making the search more flexible using the spacebar, as asked in the original post.

This is how it looks like now:
!
D
I've now solved the problem. This is the solution together with the header and CSS mentioned in the earlier posts.

JavaScript on Text Entry question:

Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
var availableTags = [
"Architect",
"Construction Laborer",
"Electrician",
"Environmental Engineer",
"Janitor",
"Mechanical Engineer",
"Plumber",
];

jQuery(' .InputText').autocomplete ( {
source: function (request, response) {
var matchArray = availableTags.slice ();
var srchTerms = jQuery.trim (request.term).split(/\\s+/);

jQuery.each (srchTerms, function (J, term) {
var regX = new RegExp (term, "i");
matchArray = jQuery.map (matchArray, function (item) {
return regX.test (item) ? item : null;
} );
} );

response (matchArray);
}

,minLength:2
});

});
A

I don't have qualtrics API. and I really need to use this framework you developed for one question. Is there any possibility of sharing the question in the library in other to update only the text information and itens?

Leave a Reply


Terms & Conditions