2

Implemented a typeahead using an input tag tied to a datalist. Chrome does not display any entries beyond the 512th match when the user scrolls through them. Entire datalist only contains about 950 entries.

Testing with Chrome for Windows, Version 76.0.3809.100 (Official Build) (64-bit).

Firefox and IE/Edge (with the Franzke polyfill) work correctly.

Is there a browser shim or polyfill that addresses this limitation?

Application previously had a select tag which limited matches to the beginning of each option.

https://www.youtube.com/watch?v=9MN-pi2GMw4 was reported by another team member to work unacceptably with special characters.

Reported as a bug to Google.

https://plnkr.co/edit/FYzwnQCMmmJcbkigBSzw

<html>
<head></head>
<body>
<input type="text" list="license_list" >
<datalist id="license_list">
    <option value="Abortions Facility"></option>
    <snip></snip>
    <option value="Mixed Beverages (Tourism Resort)"></option>
    <option value="Mixed Beverages /Historic ABC Establishment"></option>
    <option value="Mixed Beverages Catering"></option>
    <snip></snip>
    <option value="Youth Employment"></option></datalist>
</body>
<script src="datalist-polyfill.js"></script>
</html>

Example Plunk is pure HTML5 but destination application is an Angular reactive forms.

Plunk launched in Chrome, down-arrow clicked without entering anything, and scrolling to bottom stops at "Mixed Beverages/ Historic ABC Establishments" but should stop at "Youth Employment" (end of data list)

Tom Price
  • 191
  • 1
  • 10
  • 1
    Tom, did you find an answer here? I have just been alerted to this limitation. Fine in Firefox. – WebDude0482 Jun 01 '21 at 19:17
  • 1
    @WebDude0482 Short answer is no. The application is in Angular so I wrote a JS function that is passed the name and uses regular expressions to return a bool. The bool is then used to determine whether the line is displayed via *ngIf. A highlight pipe bolds the matched text. Modified the matching to word-based because that seemed to work better. Example: https://ncbold.com Very little actual code. It's a bit off-topic but can post code snippets if that would help. – Tom Price Jun 03 '21 at 01:03
  • 1
    Fiddle here to reproduce problem: https://jsfiddle.net/aL7kg6dc/ – graphicdivine Nov 10 '21 at 11:11

0 Answers0