Version 1.2.0

[cyfung1031]

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:

• close auto close dropdownlist when onSelect by mouse click #36
• close Autocomplete is relate on main document only #45
• close If minChars value is set to 0, display:none on autocomplete-suggestion does not work properly. #56

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

• Move getBoundingClientRect to options. #33
• add parentElement config #46

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)

• Dynamic Positioning (CSS and layout revised)

  Related issue: Possible to make autocomplete relative with position: fixed? #66
  Related issue: Introduce SelectorToInsert #75

• Added onRender which is exposed to public

  Related issue: Could we have callback after rendering? #47

• Added clickToShow which is to determine if the dropdown should be shown for user's clicking on input field.

• Added closeOnTap which is to determine if the dropdown should be closed for user's tapping on an autocomplete item.

• Can move the dropdown with "position=top", see demo.

  Related issue: Position, based on available space #90

Other Changes (1.2.0)

• Changed mousedown to pointerdown with left click detection

• Redesign event mechanism for blur, focus, and mouse (pointer) events

  Related Issue: double click on Apple (touch hover)  #9
  Related PR: add touchstart event #10

• Added destroyAutoComplete (element method) for removing references for the specific input field.

  Related Issue: Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. #30

• Added isContentNotEmpty (element method) for checking the input is empty or not.

• Added input event handler to detect the actual change of input value instead of accepting functional keys like ctrl / shift / alt as committing the temporary change to last_val.

• Use .closest in live() for shorter coding.

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:

• Tupy/drop old responses #5
• [BUGFIX] Prevent form submission while autocomplete is open #8

  Related PR fix bug where form would be submitted on select #87

• added .bower.json #15
• Fix race-condition issue with ajax sources #28
• Fix cache with spaces. Now you can find with multiple words. #37
• Fix cache with spaces. Now you can find with multiple words. #38
• Added method to programatically trigger results #40

  Related issue How can I dynamically change the choices in the choices Array. #62

• check please. some thing change #44
• Fix not working when the selector matches multiple elements #49
• Fix for issue #51 #52
• Keep loop indexes out of global scope #77
• Allowing selection of items with quotes #86
• code minor change for autocomplete removal #93

Issues:

• close Issue with quotes #22
• close autoComplete doesn't work on multiple elements with same selector #23
• close what is mean this code? #43
• close AutoComplete visible when element not active / in focus #51
• close Javascript doesnt replace well the 'selected' class name in the autocomplete menu #63
• close Click events leaking through to underlying elements #84
• close Request coding change for element removal #92

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

• Added an example using fetch API; for issue jquery free ajax example? #61, There are examples of ajax without jquery? #65, AJAX and Fetch API on this plug-in without using jQuery? #76

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