Search autocomplete #985

archdragon · 2019-03-26T22:50:38Z

Add autocomplete (drop-down with suggestions) to search

Demo: [ Demo link ]

Additional demos:

Description

Adds a drop-down with search suggestions
- Suggestions update as you type
- If suggestion belongs to a model (i.e. a function) it will display the module name under it.
- Marks callbacks/types with a special label.
- Searches through regular modules, behaviours, mix tasks, regular functions, callbacks and types
- Supports up/down arrow shortcuts and CTRL+ENTER shortcut for opening the result page in new window
- Handles special characters (ie. searching for ++ or @)
- Displays max 5 results
- suggestion spec file describes the autocomplete logic in depth
Layout updates
- Night mode button moved to the footer
- Also in the footer, added a button for displaying keyboard shortcuts help
- Search box now has a background and is located at the very top of the page

Full text search compatibility

This feature is fully compatible with the full-text search. I've brought back the findIn function in the search.js. While the search page no longer needs it, autocomplete still uses the basic module/function search.

TODO (in scope of this PR):

Ensure that 'x' always clears the autocomplete.
Move findIn to the 'suggestions.js'.
Ensure that Module.function syntax works
Refactor findIn to cleanup and simplify the remaining 'old search' code

assets/js/search.js

assets/test/search.spec.js

wojtekmach · 2019-03-26T23:05:58Z

How are we sorting results? I think it'd be good if in this case reduce/2 is towards top of the list. Sorting search results is not an easy problem; I recently saw an article with some heuristics and I'll try to find the link.

Seems we're only autocompleting a module or a function/type/callback/etc, what do you think about something like above?

josevalim · 2019-03-26T23:13:32Z

Awesome job @archdragon!

I have dropped two comments and I have one last question: should clicking on the "X" clean up the autocomplete/search field? That was my expectation but I am not sure if it is rooted in reality.

josevalim · 2019-03-26T23:15:16Z

How are we sorting results?

Once you find the link please open a separate issue. :) I don't want to block this one on that since the behaviour you describe was also available before (but I guess it is somewhat worse here because we limit the results to only 5).

Seems we're only autocompleting a module or a function/type/callback/etc, what do you think about something like above?

I also spotted this but I opened a separate issue (since the code behaves like this already today): #986.

archdragon · 2019-03-26T23:20:28Z

How are we sorting results?

Currently it depends on the suggestion type:

  'Module': 3,
  'Child': 2,
  'Exception': 1,
  'Mix Task': 0

Higher number == higher on the list. Child means anything that belongs to a module (function/callback/type)

Seems we're only autocompleting a module or a function/type/callback/etc, what do you think about something like above?

That makes sense - the reason it works as it does right now is that I've used existing search functionality for finding matching elements. Now that we have the full-text search (and module/function search functionality is used by autocomplete only) I might be able to add that functionality, but I'll dig a bit and check!

Slight correction: "Old search" had this functionality, but such results were not marked as "matched". Ie:

vs

and, since search was returning all functions if module name matches, autocomplete is only interested in highlighted ones and ignores all the rest.

archdragon · 2019-03-27T07:40:38Z

Awesome job @archdragon!

Thank you!

... I have one last question: should clicking on the "X" clean up the autocomplete/search field? That was my expectation but I am not sure if it is rooted in reality.

👍 This is how it's supposed to work - but looks like the input was sometimes triggering the animation/state change before the click event could register. Fixed! (and reuploaded the demo)

archdragon · 2019-03-27T23:37:46Z

Demo link now includes the Mod.fun search. I left some extra info in the related issue: #986

Now cleaning up and refactoring the "old search" code.

josevalim · 2019-03-28T08:26:38Z

Demo link now includes the Mod.fun search. I left some extra info in the related issue: #986

Beautiful! ❤️

assets/less/sidebar.less

josevalim · 2019-03-28T20:24:10Z

lib/ex_doc/formatter/html/templates/footer_template.eex

+          </span>
+        </p>
+        <p>
+          <button class="line footer-button night-mode-toggle">


The "toggle night mode" is not working for me on the latest demo (autocomplete_mod_fun).

…ther

archdragon · 2019-03-28T22:58:43Z

I've added the sort we discussed in #987 to the demo. Since I was refactoring some of the "old search" code it was more or less a one-liner. :)

As we discussed, the results are now sorted based on match chars cout / total chars count. reduce (from the @wojtekmach 's example) now looks like this:

josevalim · 2019-03-29T08:08:42Z

As we discussed, the results are now sorted based on match chars cout / total chars count. reduce (from the @wojtekmach 's example) now looks like this:

This is glorious! Please let us know whenever it is ready to merge, as we are pretty much looking forward to it! :D

archdragon · 2019-03-29T11:48:03Z

This is glorious! Please let us know whenever it is ready to merge, as we are pretty much looking forward to it! :D

Thank you! Just wanted to do some manual cross-browser testing in the morning - I'm now done with that.

To sum up:

I've simplified the matches-finding code and added extra comments
Fixed issues with night mode button not triggering change on really long pages
Added better sorting
Added support for "Mad.fun" search

I've updated the demos and uploaded some examples for ex_unit, eex etc.

From my side the PR is ready for review/merge :)

josevalim · 2019-03-29T11:48:45Z

❤️ 💚 💙 💛 💜 ❤️ 💚 💙 💛 💜 ❤️ 💚 💙 💛 💜

author Michał Łępicki <michallepicki@users.noreply.github.com> 1546725776 +0100 committer Mat Clutter <matclutter@gmail.com> 1554419584 -0400 gpgsig -----BEGIN PGP SIGNATURE----- iQIzBAABCAAdFiEEsM4qAF+pTkg2/b7aTIOp6Pcx4e4FAlymj4AACgkQTIOp6Pcx 4e5C4RAAr+0863jpjah1JcSKz6LBAR341VnwWSccn1ndvT8kohpFaogIqBh2luP1 iDCq6ZHNHviNoD/YrZDUfFbtcShSD70gCba5l2W2+QItQ7ncm1TGPC5iXi6wi+Cx VqrYPSedHNlkUNQEphePTj0a+7S16sZWgZZo74nKQL2jpbnEHQfQBMn3LeLVY749 M8LqePTPzpctEYqqFWuWhOM3HcWhZyZqR+eqJDbJPhIY0HwvmtL0+Hh/TzIYmBV2 UhMfQ2Xl2ZMPQsQpmdP8RuqyEE5FbUkY6eyZOw4FLPFt0gGqVlvWaUscFxzG5Jd9 B1siUUTIv9ghONyO5QlUJigAsMcFqBr27tOWW+qLsPvScR0LEneC/Fc71JvZsTsY b/CopfkzVNNNlgx9RYyp4zK00+E8aPqPUxvPLjusymcOmUTP/CxoGZjJY5+xroIp AVoL9j994ujM8Qs1IZo2gw6wXgi5NXgn6Tbu/Dy8mWDbShdqQu641K5anlya5A9S MkGYUZ2EeeHAYY8nj6HuIqmOvd23K1jz8uX0oqtDcu2T4K7PH1w81T00pwBwekhC 3CdiLbq0z2aWCfNl8O4/SapMbWIoYbZC6Z8oCrRjSzqQl1qyJQiHX7BunMpQd0zu sqjN+7s6mXxG33Qwkk3shOCLgPiF2sCvEnqF82Al3gWmphjcMEs= =m5NQ -----END PGP SIGNATURE----- Unify code styling for makeup and hljs (elixir-lang#959) Fix anchor links sometimes not working by moving js to html head (elixir-lang#962) Raise error message for unknown docs chunk Add goto icon Fix sidebar margin on Firefox Allow direct external links on the sidebar * Clicking on the sidebar now consistenty expands the menu * However, on every root link, there is now an arrow to open the page directly * If shift is pressed, we keep the browser behaviour * Improve CSS classes: clicked is now currentPage and active is now currentHash Hide formatter modules Release v0.19.3 Remove broken link Always show link Add extra padding Use the goto arrow consistently on expansions Reduce hljs FOUC to colors only (elixir-lang#960) Fix typespec arg number (elixir-lang#966) Previously signature where typespecs didn't have an argument name, were named starting with 0 time_zone_period_from_utc_iso_days(arg0, arg1) time_zone_period_from_utc_iso_days(Calendar.iso_days(), Calendar.time_zone()) :: ... this commit fixes the number starting from 1 Name args in Autolink.default_text/4 helper (elixir-lang#957) Add titles to sidebar top-right icons Improve mouseover and titles on goto, related to elixir-lang#968 Add a versions dropdown to the html sidebar (elixir-lang#970) Remove overflow on content, closes elixir-lang#972 Reduce size of app-vsn annotation Keep trailing periods in summaries (elixir-lang#977) Closes elixir-lang#975 Revert "Remove overflow on content, closes elixir-lang#972" This reverts commit 43effcb. The reverted commit breaks anchors on Firefox. Fix anchors in Firefox/Chromium Closes elixir-lang#978 Added ARIA-label to the search button Signed-off-by: José Valim <jose.valim@plataformatec.com.br> Add keyboard shortcuts (elixir-lang#976) Fix issues with JS events under non-webkit browsers (elixir-lang#980) Keyboard shortcuts - improvements (elixir-lang#982) Add module to node structs to carry module name; add mfa into title attribute on links to improve seo Fix tests to include title Run formatter Remove module attribute on nodes; update templates to pass in module to reference title where needed Remove 'Link to' text except for detail chain link and screenreader info Update tests to remove Link to text from api and non-detail templates Undo unintentional format of spacing Remove link to text from title attributes Update css/js with new sha version Add title attribute with mfa on links to improve seo Add module to node structs to carry module name; add mfa into title attribute on links to improve seo Remove 'Link to' text except for detail chain link and screenreader info Undo unintentional format of spacing Add title attribute with mfa on links to improve seo Update title in detail template examples Add title to replace function for links in text Update auto link to add titles to links within page content and specs Add module_id into default_title to add full mfa to local functions Lowercase section headings in titles New dist files after running build after rebase accumulation Remove rebased-in code Update module details and search results Create seperate entry function for extras headings; change casing on summary Update templates and tests to remove tags from titles Change binary block formatting keep formatter from breaking lines Full text search (elixir-lang#974) Fix required double click on sidebar for safari Improvements to full text search * Add loading state * Only load search items on search page No longer depend on Poison Move shared dependency to HTML Do not render to markdown multiple times Make the linter happy Ignore : in search as it is not stemmed anyway, closes elixir-lang#983 Provide search help on invalid syntax Remove double var Keep structs in signature, closes elixir-lang#973 List delegation docs if delegate_to metadata is present Run the formatter in released Elixir version Update CHANGELOG Search autocomplete (elixir-lang#985) Rename config.js to ex_doc_config.js Push Earmark to v1.3 (elixir-lang#988) Add module to node structs to carry module name; add mfa into title attribute on links to improve seo Run formatter Remove module attribute on nodes; update templates to pass in module to reference title where needed Remove 'Link to' text except for detail chain link and screenreader info Undo unintentional format of spacing Update css/js with new sha version Add title attribute with mfa on links to improve seo Add module to node structs to carry module name; add mfa into title attribute on links to improve seo Remove 'Link to' text except for detail chain link and screenreader info Undo unintentional format of spacing Add title attribute with mfa on links to improve seo Add module_id into default_title to add full mfa to local functions Lowercase section headings in titles New dist files after running build after rebase accumulation Remove rebased-in code Update module details and search results Create seperate entry function for extras headings; change casing on summary Update templates and tests to remove tags from titles Change binary block formatting keep formatter from breaking lines Add link_title to new searchItems list Update earmark after deps.get Update css/js assets after mix build Update css/js assets after mix build

archdragon added 18 commits March 26, 2019 21:38

Quick draft

9d06f32

Create first prototype

8842a80

Fix first item selection and click support

7510068

Move sidebar to the top and update autocomplete format

94fa232

Start cleaning the code up

ce0f8e1

Add extra specs

da408cf

Add extra specs, refactor code

1b7fee9

Update documentation and naming

74e98f8

Divide autocomplete code into 'presentation' and 'logic' part

08cf3e9

Update function names and simplify the serialized struct

2c092ed

Additional cleanup

e95c02a

Add extra comments to the suggestions functions

1486b6a

Add back 'findIn' and related functions

f5f8449

Update footer link display and code style

98203b4

Remove unneeded comments

25edbd1

fixup! Remove unneeded comments

f019767

Add 'tabindex' to autocomplete suggestions to fix Safari's onBlur

6257199

Make toggle click area larger

288b6e5

josevalim reviewed Mar 26, 2019

View reviewed changes

assets/js/search.js Outdated Show resolved Hide resolved

josevalim reviewed Mar 26, 2019

View reviewed changes

assets/test/search.spec.js Outdated Show resolved Hide resolved

wojtekmach mentioned this pull request Mar 26, 2019

Autocomplete improvements #987

Closed

Fix 'x' button click not registering

8147a20

Mod.fun search in autocomplete - first draft

07b9a14

josevalim mentioned this pull request Mar 28, 2019

Provide "Search or go to..." functionality #967

Closed

[WIP] Simplify the matching function

06cb955

josevalim reviewed Mar 28, 2019

View reviewed changes

assets/less/sidebar.less Outdated Show resolved Hide resolved

josevalim reviewed Mar 28, 2019

View reviewed changes

archdragon added 3 commits March 28, 2019 21:27

Remove unneeded margin

2b9ae6b

Update night mode click listener

4ab4d63

[WIP] Sort results by match quality, simplify the findIn function fur…

235739a

…ther

archdragon added 4 commits March 29, 2019 00:33

Refactor and add function descriptions

ac0919f

fixup! Refactor and add function descriptions

824bbd3

fixup! fixup! Refactor and add function descriptions

bb5d690

fixup! fixup! fixup! Refactor and add function descriptions

18225d8

josevalim merged commit 13712e3 into elixir-lang:master Mar 29, 2019

matlc mentioned this pull request Apr 4, 2019

parent ab2c3ddb78d70ffa65f8bc9f4858b7207c9a3a3d matlc/ex_doc#4

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Search autocomplete #985

Search autocomplete #985

Uh oh!

archdragon commented Mar 26, 2019 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

wojtekmach commented Mar 26, 2019

Uh oh!

josevalim commented Mar 26, 2019

Uh oh!

josevalim commented Mar 26, 2019

Uh oh!

archdragon commented Mar 26, 2019 •

edited

Loading

Uh oh!

archdragon commented Mar 27, 2019

Uh oh!

archdragon commented Mar 27, 2019 •

edited

Loading

Uh oh!

josevalim commented Mar 28, 2019

Uh oh!

Uh oh!

josevalim Mar 28, 2019

Uh oh!

archdragon Mar 28, 2019

Uh oh!

archdragon commented Mar 28, 2019

Uh oh!

josevalim commented Mar 29, 2019

Uh oh!

archdragon commented Mar 29, 2019

Uh oh!

josevalim commented Mar 29, 2019

Uh oh!

Uh oh!

Search autocomplete #985

Search autocomplete #985

Uh oh!

Conversation

archdragon commented Mar 26, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Demo: [ Demo link ]

Description

Full text search compatibility

Uh oh!

Uh oh!

Uh oh!

wojtekmach commented Mar 26, 2019

Uh oh!

josevalim commented Mar 26, 2019

Uh oh!

josevalim commented Mar 26, 2019

Uh oh!

archdragon commented Mar 26, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

archdragon commented Mar 27, 2019

Uh oh!

archdragon commented Mar 27, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

josevalim commented Mar 28, 2019

Uh oh!

Uh oh!

josevalim Mar 28, 2019

Choose a reason for hiding this comment

Uh oh!

archdragon Mar 28, 2019

Choose a reason for hiding this comment

Uh oh!

archdragon commented Mar 28, 2019

Uh oh!

josevalim commented Mar 29, 2019

Uh oh!

archdragon commented Mar 29, 2019

Uh oh!

josevalim commented Mar 29, 2019

Uh oh!

Uh oh!

archdragon commented Mar 26, 2019 •

edited

Loading

archdragon commented Mar 26, 2019 •

edited

Loading

archdragon commented Mar 27, 2019 •

edited

Loading