Extends jQuery UI Autocomplete widget with a button that clears away the current value of the autocomplete <input> element.
The following options are available:
clearButton- type: Boolean, default:true- adds a button that will clear the autocomplete inputclearButtonHtml- type: String, default:'×'- the content of the buttonclearButtonPosition- type: Object|Boolean, default:{my: "right center", at: "right center"}- an object with the parameters needed to position the button using jQuery UI Position (http://api.jqueryui.com/position/). Set it tofalseif you want to position the button via CSS.
Demo available on Codepen.
Initialize the autocomplete the same as before.
$("input").autocomplete({
// options
});Include the script after jQuery UI's main javascript file:
<script src="jquery-ui.js"></script>
<script src="jquery-ui-autocomplete-with-clear-button.js"></script>Include jquery-ui-autocomplete-with-clear-button.css in your project or use the .scss file:
<link rel="stylesheet" href="jquery-ui-autocomplete-with-clear-button.css" media="all" />@import "jquery-ui-autocomplete-with-clear-button";
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent