@Prtksxna Created this ticket for you to take on next. It's only for the search image feature in the tool.
Points in description with XXX needs you to add more detail. Also feel free to add anything I missed.

@Prtksxna I think we should clarify this bit further -

Clicking (or pressing enter) on a suggestion populates the input box with the suggested image and automatically takes the user to the Translate view

From our conversation yesterday it seems like we don't need to do the "populates the input box with the suggested image" bit, right? Clicking on suggestion should instantly take user to translate view?

In T204596#4606332, @Niharika wrote:

From our conversation yesterday it seems like we don't need to do the "populates the input box with the suggested image" bit, right? Clicking on suggestion should instantly take user to translate view?

We'd want both, and the behaviour to be similar to what people see elsewhere (on Google, Wikipedia etc) where the input is populated and the page is redirected at the same time.

The first part of this is ready for review: https://github.com/wikimedia/svgtranslate/pull/14

It mostly is about adding OOUI and a custom search widget (that doesn't do anything yet).

I've switched the above patch to use SearchInputWidget as discussed, and it's ready for review again.

The autocomplete is functioning. It doesn't go anywhere yet, but that will come next.

Reviewed and had one small question/comment.

This is merged, and can be used on the test site now: https://tools.wmflabs.org/svgtranslate-test/

Did some testing on this.

I find the search results to be a bit off sometimes:

The first three results don't match up with the entered text (File). The ones after that do.

In this one I was typing Cotton. I get unrelated results for Cott

Nothing for Cotto

Bunch of results for Cotton, as expected

@Niharika We are using the search API. We can take a look but it's possible these are just the vagaries of the search API and not much can be done about it by us.

Here's an example query for "cott" in the API Sandbox: https://commons.wikimedia.org/wiki/Special:ApiSandbox#action=query&format=json&list=search&meta=&srsearch=cott%20filetype%3Adrawing&srnamespace=6

It returns that Scarlet.svg file just like your example.

If I try it with "nearmatch" as the srwhat, I get zero results: https://commons.wikimedia.org/wiki/Special:ApiSandbox#action=query&format=json&list=search&meta=&srsearch=cott%20filetype%3Adrawing&srnamespace=6&srwhat=nearmatch&srinfo=totalhits%7Csuggestion%7Crewrittenquery&srprop=size%7Cwordcount%7Ctimestamp%7Csnippet

Yes, I think we can't do much about the search API's vagaries.

We could switch to a prefix search though, if we are thinking that people will always be searching for a specific filename. We can't (as far as I can see) limit prefix searching to SVGs, but we could filter the results after retrieval (and do extra requests to progressively get up to ten results).

@Niharika Good question. We can make a task. It may be working the way they want it to?

If they think returning Scarlet.svg is appropriate when the user searches for cott, then we have a bigger problem.

Hahahaha. I can make a ticket.