Skip to content

Commit

Permalink
Pack v2.0.0
Browse files Browse the repository at this point in the history
  • Loading branch information
@indrimuska
indrimuska committed Aug 16, 2016
1 parent 68b816c commit d3bd625
Show file tree
Hide file tree
Showing 7 changed files with 236 additions and 174 deletions.
86 changes: 45 additions & 41 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,22 +45,6 @@ Include style and script in your page:
<option>Audi</option>
<option>BMW</option>
<option>Citroen</option>
<option>Fiat</option>
<option>Ford</option>
<option>Jaguar</option>
<option>Jeep</option>
<option>Lancia</option>
<option>Land Rover</option>
<option>Mercedes</option>
<option>Mini</option>
<option>Nissan</option>
<option>Opel</option>
<option>Peugeot</option>
<option>Porsche</option>
<option>Renault</option>
<option>Smart</option>
<option>Volkswagen</option>
<option>Volvo</option>
</select>
```
```javascript
Expand All @@ -76,6 +60,7 @@ The default text showed right after the initialization.
<option>Alfa Romeo</option>
<option selected>Audi</option>
<option>BMW</option>
<option>Citroen</option>
</select>
```

Expand All @@ -89,22 +74,6 @@ All HTML tags in each `<option>` element will be rendered after initialization.
<option>Audi - &lt;small&gt;&lt;a href="http://www.audi.com/"&gt;www.audi.com&lt;/a&gt;&lt;/small&gt;</option>
<option>BMW - &lt;small&gt;&lt;a href="http://www.bmw.com/"&gt;www.bmw.com&lt;/a&gt;&lt;/small&gt;</option>
<option>Citroen - &lt;small&gt;&lt;a href="http://www.citroen.com/"&gt;www.citroen.com&lt;/a&gt;&lt;/small&gt;</option>
<option>Fiat - &lt;small&gt;&lt;a href="http://www.fiat.com/"&gt;www.fiat.com&lt;/a&gt;&lt;/small&gt;</option>
<option>Ford - &lt;small&gt;&lt;a href="http://www.ford.com/"&gt;www.ford.com&lt;/a&gt;&lt;/small&gt;</option>
<option>Jaguar - &lt;small&gt;&lt;a href="http://www.jaguar.com/"&gt;www.jaguar.com&lt;/a&gt;&lt;/small&gt;</option>
<option>Jeep - &lt;small&gt;&lt;a href="http://www.jeep.com/"&gt;www.jeep.com&lt;/a&gt;&lt;/small&gt;</option>
<option>Lancia - &lt;small&gt;&lt;a href="http://www.lancia.com/"&gt;www.lancia.com&lt;/a&gt;&lt;/small&gt;</option>
<option>Land Rover - &lt;small&gt;&lt;a href="http://www.landrover.com/"&gt;www.landrover.com&lt;/a&gt;&lt;/small&gt;</option>
<option>Mercedes - &lt;small&gt;&lt;a href="http://www.mercedes-benz.com/"&gt;www.mercedes-benz.com&lt;/a&gt;&lt;/small&gt;</option>
<option>Mini - &lt;small&gt;&lt;a href="http://www.mini.com/"&gt;www.mini.com&lt;/a&gt;&lt;/small&gt;</option>
<option>Nissan - &lt;small&gt;&lt;a href="http://www.nissan-global.com/"&gt;http://www.nissan-global.com/&lt;/a&gt;&lt;/small&gt;</option>
<option>Opel - &lt;small&gt;&lt;a href="http://www.opel.com/&gt;www.opel.com&lt;/a&gt;&lt;/small&gt;</option>
<option>Peugeot - &lt;small&gt;&lt;a href="http://www.peugeot.com/"&gt;www.peugeot.com&lt;/a&gt;&lt;/small&gt;</option>
<option>Porsche - &lt;small&gt;&lt;a href="http://www.porsche.com/"&gt;www.porsche.com&lt;/a&gt;&lt;/small&gt;</option>
<option>Renault - &lt;small&gt;&lt;a href="http://www.renault.com/"&gt;www.renault.com&lt;/a&gt;&lt;/small&gt;</option>
<option>Smart - &lt;small&gt;&lt;a href="http://www.smart.com/"&gt;www.smart.com&lt;/a&gt;&lt;/small&gt;</option>
<option>Volkswagen - &lt;small&gt;&lt;a href="http://volkswagen.com/"&gt;volkswagen.com&lt;/a&gt;&lt;/small&gt;</option>
<option>Volvo - &lt;small&gt;&lt;a href="http://www.volvo.com/"&gt;www.volvo.com&lt;/a&gt;&lt;/small&gt;</option>
</select>
```

Expand All @@ -120,6 +89,8 @@ You can change the max-height of the list box by overriding this css rule:

## Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-filter="true"`.

Property | Type | Default | Description
---|:---:|:---:|---
filter | Boolean | `true` | Filter (or not) items in list while typing.
Expand All @@ -135,20 +106,53 @@ $('#editable-select').editableSelect({
});
```

### Default settings

You can change the default settings for a plugin by modifying the plugin's `Constructor.DEFAULTS` object:

```javascript
$.fn.editableSelect.Constructor.DEFAULTS.effects = 'slide';
// changes default for the plugin's `effects` option to `slide`
```

## Methods

### `.editableSelect(options);`

Transforms the `<select>` into and jQuery Editable Select. Accepts an optional options `object`.

### `.editableSelect('show');`

Manually shows the dropdown list.

### `.editableSelect('hide');`

Manually hides the dropdown list.

### `.editableSelect('filter');`

Manually filters the dropdown list according to the value of the text field.

### `.editableSelect('select', $element);`

Manually sets the value of the text field to the value of the `$element` passed as parameter (it must be one of the elements in the dropdown list).

### `.editableSelect('add', text [, index [, attrs [, data ]]] );`

Adds a new option in the dropdown list. You can choose the position where to insert the element (starting from `0`) and any attributes (or data-attributes) to be assigned.

## Events

Event | Parameters | Description
---|:---:|---
onCreate | | Fired after input initialization.
onShow | | Fired when the list is shown.
onHide | | Fired when the list is hidden.
onSelect | `element` | Fired when an option of the list is selected.
create.editable-select | | Fired after input initialization.
show.editable-select | | Fired when the list is shown.
hide.editable-select | | Fired when the list is hidden.
select.editable-select | `$element` | Fired when an option of the list is selected.

```javascript
$('#editable-select').editableSelect({
onSelect: function (element) {
alert("Selected!");
}
$('#editable-select').on('show.editable-select', function (e) {
// do something...
});
```

Expand All @@ -171,4 +175,4 @@ jQuery Editable Select includes support for keyboard navigation:

# License

Copyright (c) 2015 Indri Muska. Licensed under the MIT license.
Copyright (c) 2016 Indri Muska. Licensed under the MIT license.
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "jquery-editable-select",
"version": "1.0.2",
"version": "2.0.0",
"authors": [
"Indri Muska <[email protected]>"
],
Expand Down
4 changes: 2 additions & 2 deletions dist/jquery-editable-select.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@
*/

input.es-input { padding-right: 20px !important; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAICAYAAADJEc7MAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAG2YAABzjgAA4DIAAIM2AAB5CAAAxgwAADT6AAAgbL5TJ5gAAABGSURBVHjaYvz//z8DOYCJgUzA0tnZidPK8vJyRpw24pLEpwnuVHRFhDQxMDAwMPz//x+OOzo6/iPz8WFGuocqAAAA//8DAD/sORHYg7kaAAAAAElFTkSuQmCC) right center no-repeat; }
input.es-input:focus {
input.es-input.open {
-webkit-border-bottom-left-radius: 0; -moz-border-radius-bottomleft: 0; border-bottom-left-radius: 0;
-webkit-border-bottom-right-radius: 0; -moz-border-radius-bottomright: 0; border-bottom-right-radius: 0; }
.es-list { display: block; position: absolute; padding: 0; margin: 0; border: 1px solid #d1d1d1; display: none; z-index: 1000; background: #fff; max-height: 160px; overflow-y: auto;
.es-list { position: absolute; padding: 0; margin: 0; border: 1px solid #d1d1d1; display: none; z-index: 1000; background: #fff; max-height: 160px; overflow-y: auto;
-moz-box-shadow: 0 2px 3px #ccc; -webkit-box-shadow: 0 2px 3px #ccc; box-shadow: 0 2px 3px #ccc; }
.es-list li { display: block; padding: 5px 10px; margin: 0; }
.es-list li.selected { background: #f3f3f3; }
Loading

0 comments on commit d3bd625

Please sign in to comment.