{"repo":"github/auto-complete-element","free":true,"listed":false,"github":"https://github.com/github/auto-complete-element","clone":"git clone https://github.com/github/auto-complete-element.git","description":"Auto-complete input values from server search results.","language":"JavaScript","stars":405,"topics":["web-components","custom-elements"],"license":"MIT","category":"ui-components","readme_excerpt":"<auto-complete> element Auto-complete input values from server search results. Installation Usage Script Import as ES modules: With a script tag: Markup If you want to enable auto-select (pressing Enter in the input will select the first option), using the above example: The server response should include the items that matched the search query. The data-autocomplete-value attribute can be used to define the value for an item whose display text needs to be different: Use data-no-result-found=\"true\" to show a no results message inside the autocomplete popover. Be sure to add role=\"presentation\" to this element so that screen readers do not mistake this as an auto-complete option. The auto-complete-element has built in functionality that handles aria-live announcing number of search results so this should be purely decorative. A Note on Clear button While input type=\"search\" comes with an x that clears the content of the field and refocuses it on many browsers, the implementation for this control is not keyboard accessible, and so we've opted to enable a customizable clear button so that your keyboard users will be able to interact with it. As an example: In Chrome, this 'x' isn't a button but a div with a pseudo=\"-webkit-search-cancel-button\". It doesn't have a tab index or a way to navigate to it without a mouse. Additionally, this control is only visible on mouse hover. Attributes - open is true when the auto-complete result list is visible - value is the selected valu","default_branch":null,"files":null,"tree":[],"storefront":"/r/github","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/github/auto-complete-element/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}