Search Box Autocomplete #5424
Search Box Autocomplete #5424
Conversation
…plete in terms of navigation.
|
Nice!! I like black color better than the blue for the package name. Is it possible to append the download count along with the package ID? E.g. MyPackage.Sample (<downloadIcon>21,345) Description. Package ID - black |
| return; | ||
| } | ||
|
|
||
| var requestUrl = "/api/v2/package-ids?partialId=" + currInput + "&semVerLevel=2.0.0"; |
There was a problem hiding this comment.
If you can, try to pass in this URL template in using some method on UrlExtensions like we do with some of our other scripts. Same with the package-details URL below. Not a big deal tho.
| }); | ||
|
|
||
| $("#autocomplete-results-container").keydown(function (e) { | ||
| if (e.keyCode === 40) { |
There was a problem hiding this comment.
I think every keycode should have either a comment or an appropriately named constant. You put comments in the searchBox key which was good, but I don't see comments on all the keycodes.
if (e.KeyCode === _downArrow) {
or
if (e.KeyCode === 40) { // down arrow
|
|
||
| function hookAutocomplete(maxResults) { | ||
| _resultsCache.results = ko.observable(); | ||
| $(document).keydown(function (e) { |
There was a problem hiding this comment.
May want to add some more comments through this code in general, we're C# devs not JS devs so some of this stuff goes over our heads a little more than the usual knockout stuff does.
Especially for the stuff below with the timeouts, e.g.
// We will only begin loading the autocomplete results X seconds after the user has typed into the autocomplete box.
| @@ -686,6 +686,26 @@ protected internal virtual Stream ReadPackageFromRequest() | |||
| }; | |||
| } | |||
|
|
|||
| [HttpGet] | |||
| [ActionName("PackageDetails")] | |||
| public virtual async Task<ActionResult> GetPackageDetails( | |||
There was a problem hiding this comment.
GetPackageDetails [](start = 48, length = 17)
change the name to indicate that this searches
| return; | ||
| } | ||
|
|
||
| var requestUrl = "/api/v2/package-ids?partialId=" + currInput + "&semVerLevel=2.0.0"; |
There was a problem hiding this comment.
please test on DEV to see if this works well on APIM
| var tempId = idList[i]; | ||
| var searchData = _resultsCache[safeId(tempId)]; | ||
| if (typeof searchData() == "string") { | ||
| requestUrl += "packageId:" + idList[i] + " "; |
| } | ||
|
|
||
| function setupAllAuxData(idList) { | ||
| var requestUrl = "/api/v2/package-details?searchString="; |
|
Have we done an accessibility pass on this? Could you ask @anangaur if we should talk to UX exports about this change? |
|
Accessibility then |
…ck. add some padding.
|
A new endpoint under /api/v2. Can it somehow be documented? Do third party servers need it? |
|
@maartenba, this endpoint is an implementation detail for the auto-complete box and will not be used by the client.
@ryuyu, @skofman1 - feel free to chime in here, but seeing as even the parts of the V2 protocol that the client uses are not documented, it doesn't make sense here.
Nope. Unless you want to implement an auto-complete search box in the same way... but even that it's an implementation detail. |
|
I am not in favor of documenting any V2 APIs. If required, we can have a work item tracking a corresponding V3 API but not something we can work on, in near term. |
|
Thanks! Not a requirement imo but given it suddenly appears on the API/v2 path I just had to ask. |
|
@anangaur @joelverhagen please bare in mind that properly rolling out APIM in front of the gallery may require "some" v2 API docs going forward. Reason: APIM efforts mandate we define these API endpoints, and their expected behavior in APIM config rules (e.g. request throttling, redirect to HTTPS, etc). |
This PR adds in search box "autocomplete" and a new api endpoint to support this. @anangaur
On Front Page:
On Packages Page:
Current interaction scheme:
Arrow keys up and Down while focused in search box will move up and down the autocomplete list.
Tabbing/esc will close the list.
Enter with result selected/focused will navigate to package details page.