jQuery UI Autocomplete with clear button

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 input
• clearButtonHtml- type: String, default: '×' - the content of the button
• clearButtonPosition - 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 to false if you want to position the button via CSS.

Demo

Demo available on Codepen.

Usage

Initialize the autocomplete the same as before.

$("input").autocomplete({
    // options 
});

Setup

Javascript

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>

CSS / SASS

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";