[autocomplete] prioritize the user for which the nickname STARTS with the text typed

[bernard-ng]

Describe the bug
If you start typing the at-character ("@") followed by letters, the Converse UI will automatically try to auto-complete with the nickname of an occupant of the room.
For example, when I type "@ ber" I get this:

One thing that would be an improvement, is if Converse would prioritize the user for which the nickname STARTS with the text that I typed
You see in the example above that both Bernard's name as well as Viktor's match
If I would have pressed 'tab' after typing "@ ber" then it would have auto-completed with Viktor's name, instead of Bernard's
I think 99% of the times, a user intends to select the user who's nickname starts with whatever is typed.

To Reproduce
type a text starting with "@"

Expected behavior
prioritize the user for which the nickname STARTS with the text that is typed

Environment (please complete the following information):

• Desktop
• Browser [Chrome]
• Converse.js version [6.0.1]

[guusdk]

@Zash noted that the autocomplete behavior can be controlled with the muc_mention_autocomplete_filter configuration option. The default for this is contains but starts_with can also be used.

However, it would be preferable to prioritize nicknames that start with the provided input, when the contains option is used. That currently is not the case.

[bernard-ng]

By analyzing the code, here are the different filters available:

converse.js/src/converse-autocomplete.js

Lines 15 to 22 in 522e770

	export const FILTER_CONTAINS = function (text, input) {
	return RegExp(helpers.regExpEscape(input.trim()), "i").test(text);
	};
	export const FILTER_STARTSWITH = function (text, input) {
	return RegExp("^" + helpers.regExpEscape(input.trim()), "i").test(text);
	};

What do you think of a solution that adds a third filter, "starts_or_contains" ?

[guusdk]

What do you think of a solution that adds a third filter, "starts_or_contains" ?

I do not think that's the right approach. starts_or_contains would have the same results (something that 'starts' with a particular substring also 'contains' that substring).

Instead, I think you should modify the order of results that are returned with FILTER_CONTAINS.

[jcbrand]

The AutoComplete class has a sort configuration attribute (see here) and sorts with a function called SORT_BY_LENGTH.

You'll need to update AutoComplete to accept a function for the sort config parameter (and not just a boolean as currently), and then you need to update the MUC code that uses AutoComplete to pass in your own sort function that sorts according to whether the matches start with the string or not.

[bernard-ng]

The sort function only takes two parameters, the current and the next element, but I'm supposed to reorganize the results according to the text typed by the user.

An idea on how I can have the text typed in a sort function without changing the signature of the function so that it remains compatible ?

[jcbrand]

The things being compared here are instances of the Suggestion class.

That class already has a value attribute which is the suggested match. What's still needed is the query string (the string being auto-completed). If you have that, then you have all the information necessary.

I've made a change to do that here: a72ad8a

So now you have the text typed by the user as the query attribute on the Suggestion instance.

[bernard-ng]

Here is what I’ve done #2234, it works as expected on my machine but it seems to break some unit tests, how can I fix that ?

[jcbrand]

You'll have to identify the failing tests and then run them individually to figure out why they're failing and then fix the tests or the underlying issue in the code.

I've written some documentation on how to run the tests:

https://github.com/conversejs/converse.js/blob/master/docs/source/testing.rst

[bernard-ng]

tell me if I'm wrong, the auto-completion for contacts uses the "contains" filter but it looks like the results are not sorted,
what made the test can not pass, I saw the contact list available in the mock :

converse.js/spec/mock.js

Lines 541 to 557 in fff9eea

	mock.current_contacts_map = {
	'Mercutio': ['Colleagues', 'friends & acquaintences'],
	'Juliet Capulet': ['friends & acquaintences'],
	'Lady Montague': ['Colleagues', 'Family'],
	'Lord Montague': ['Family'],
	'Friar Laurence': ['friends & acquaintences'],
	'Tybalt': ['friends & acquaintences'],
	'Lady Capulet': ['ænemies'],
	'Benviolo': ['friends & acquaintences'],
	'Balthasar': ['Colleagues'],
	'Peter': ['Colleagues'],
	'Abram': ['Colleagues'],
	'Sampson': ['Colleagues'],
	'Gregory': ['friends & acquaintences'],
	'Potpan': [],
	'Friar John': []
	};

Tybalt, comes before Balthasar.

how do I activate the filter, when it comes to contacts?
my little change fixes the test but not totally, I can't activate the sorting function I created.

[guusdk]

Can you please rephrase your question? We've disucced it in the chatroom, but couldn't understand what you're trying to say.

[bernard-ng]

is it the same Autocomplete class located in the src/converse-autocomplete.js file that makes the following two examples work ?

au-completion in a chatroom

au-completion for contact

[jcbrand]

@bernard-ng Yes, AFAIK they both use the <converse-autocomplete> component, and that component makes a new instance of AutoComplete every time it's created.

See here:

converse.js/src/components/autocomplete.js

Line 50 in e82d678

this.auto_complete = new AutoComplete(this.firstElementChild, {

[bernard-ng]

alright in this case I don't have anything more to do on my side, is there anything to modify before merging ?

[guusdk]

Like I suggested in #2234 (comment) please remove all of the unneeded commits that are in the PR, to clean things up.