https://github.com/westonganger/chosen-remote-source

Provides remote data source support for chosen-js selects
https://github.com/westonganger/chosen-remote-source

ajax ajax-select chosen chosen-js html-select javascript select

Last synced: 30 days ago
JSON representation

Provides remote data source support for chosen-js selects

• Host: GitHub
• URL: https://github.com/westonganger/chosen-remote-source
• Owner: westonganger
• License: mit
• Created: 2021-02-02T02:10:45.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2021-05-20T19:58:36.000Z (over 3 years ago)
• Last Synced: 2024-10-04T19:17:49.820Z (about 1 month ago)
• Topics: ajax, ajax-select, chosen, chosen-js, html-select, javascript, select
• Language: JavaScript
• Homepage:
• Size: 26.4 KB
• Stars: 4
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# chosen-remote-source





Provides remote data source support for [`chosen-js`](https://github.com/harvesthq/chosen) selects.

To make this library future proof we try not to change or add hardly any code to original chosen-js code.

# Install

#### Yarn or NPM

```

yarn add chosen-remote-source

npm install chosen-remote-source

```

# Usage

```javascript

$('select.chosen-remote-source').chosenRemoteSource({

  url: "/my-path",

  method: "GET",

  delay: 250,

  event: 'input',

  label_field: 'label',

  value_field: 'value',

  search_param: 'q',

  selected_param: 'selected',

});

```

Now upon entering text the remote URL will be used to create an AJAX query to update the select options.

The ajax request will send the following parameter names according to the specified `search_param` and `selected_param` options.

```

{q: 'foo', selected: [1,6,8]}

```

The plugins expects that your URL will return an array of objects with attribute names according to the specified `value_field` and `label_field` options.

```

[

  {

    value: "1",

    label: "Foo",

  },

  {

    value: "2",

    label: "Bar",

  },

  

  /* ... */

]

```

# Contributing

Testing is handled within [`./index.html`](./index.html)

# Credits

Created by [Weston Ganger](https://westonganger.com) - [@westonganger](https://github.com/westonganger)