Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Version 1.2.0 #95

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Version 1.2.0 #95

wants to merge 2 commits into from

Conversation

cyfung1031
Copy link

@cyfung1031 cyfung1031 commented Oct 6, 2023

Version 1.2.0

  • Use a more efficient CSS design to avoid unnecessary style (position & sizing) computation in JavaScript.
  • The minified js code is smaller than both 1.0.4 and 1.1.0

https://github.com/culefa/JavaScript-autoComplete/tree/1.2.0

I don't think the author will review and approve any PR in this repo, feel free to use this branch by yourself

The autocomplete is no longer attached to body. It is attached in a pivot element before the input field.
By using CSS, it can fully automatically locate with the dynamic position of the input field.
(Sizing is not CSS automatically, but it can be updated via JS)

  • For upgrade from 1.0.4 or 1.1.0, pay attention to the change of CSS and the related DOM structure.

Issues:

Override PRs (those PRs are no longer valid as implementation changes with issue fixing):

New DOM Structure

Compatible with original layout

<parent>
    ...
    <autocomplete-holder>
        <div class="autocomplete-suggestions">
            <div class="autocomplete-suggestion">...</div>
            <div class="autocomplete-suggestion">...</div>
            <div class="autocomplete-suggestion">...</div>
            ...
            <div class="autocomplete-suggestion">...</div>
        </div>
    </autocomplete-holder>
    ...
</parent>

Dynamic Positioning Layout

<div style="postion: fixed; right: 52px; top:20px;">
    <autocomplete-holder>
        <div class="autocomplete-suggestions">
            <div class="autocomplete-suggestion">...</div>
            <div class="autocomplete-suggestion">...</div>
            <div class="autocomplete-suggestion">...</div>
            ...
            <div class="autocomplete-suggestion">...</div>
        </div>
    </autocomplete-holder>
</div>

Link:

Demo

https://raw.githack.com/culefa/JavaScript-autoComplete/1.2.0/demo.html

JS

https://cdn.jsdelivr.net/gh/culefa/[email protected]/auto-complete.js
https://cdn.jsdelivr.net/gh/culefa/[email protected]/auto-complete.min.js

CSS

https://cdn.jsdelivr.net/gh/culefa/[email protected]/auto-complete.css
https://cdn.jsdelivr.net/gh/culefa/[email protected]/auto-complete.min.css

Browser Requirements - Earlier 2015+

  • Chrome 41+, Edge 15+, Safari 9+, Firefox 35+, Opera 28+, all mobile browsers

Breaking Changes (1.2.0)

Other Changes (1.2.0)

Version 1.1.0

  • This is mainly for rolling up the previous PRs (mainly for bug fixing), no coding change required to update from 1.0.4

https://github.com/culefa/JavaScript-autoComplete/tree/1.1.0

I don't think the author will review and approve any PR in this repo, feel free to use this branch by yourself

PRs included:

Issues:

Also fixed some issues related to demo.html, README, etc.

Fix for Significant Bugs:

  • Significant Bug Fix 1: val inside setTimeout might have already changed. Refresh the val value.
  • Significant Bug Fix 2: display was not set initially.

No change of any existing usages.

Link:

Demo

https://raw.githack.com/culefa/JavaScript-autoComplete/1.1.0/demo.html

JS

https://cdn.jsdelivr.net/gh/culefa/[email protected]/auto-complete.js
https://cdn.jsdelivr.net/gh/culefa/[email protected]/auto-complete.min.js

CSS

https://cdn.jsdelivr.net/gh/culefa/[email protected]/auto-complete.css
https://cdn.jsdelivr.net/gh/culefa/[email protected]/auto-complete.min.css

Browser Requirements - Late 2014+

  • Chrome 38+, Edge 13+, Safari 8+, Firefox 26+, Opera 25+, all mobile browsers

Breaking Changes (1.1.0)

  • Dropped IE Support

  • renderItem can now accept element in addition to html code

  • added renderItems which is exposed to public

Other major changes (1.1.0)

  • replaced mouseover to mouseenter for better performance

  • modifying classList instead of className

  • Added triggerSC (element method) for update result manually

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment