Custom jQuery plugin to work with multiple search selections (like the one in Semantic UI: http://semantic-ui.com/modules/dropdown.html#multiple-search-selection)
- Just clone the repository and insert it into your application.
- Initiliaze the plugin by running:
var jsonSource = [{ Value: 0, Text: 'ASP.NET' }, { Value: 1, Text: 'AngularJS' }, { Value: 2, Text: 'PowerCenter' }, { Value: 3, Text: 'Oracle SQL Developer' }, { Value: 4, Text: 'PHP' }];
$('.select-list').selectList({dataSource: jsonSource});
Notes: $('.select-list') must be an input. It will throw an error otherwise: "Invalid input for select list"
- Input width
$('.select-list').selectList({dataSource: jsonSource, width:'50%'});
Default width is "100%".
- Data Source URL
$('.select-list').selectList({ dataURL: "http://example.com/api/GetExampleData" });
- Autocomplete from server
By default, whatever source you choose, the autocomplete will be made offline based on the initial collection. If, however, you are supplying your data from a webservice and want your autocomplete to fetch from server you must pass the option "autocompleteFromServer": $('.select-list').selectList({ dataURL: "http://example.com/api/GetExampleData" , autocompleteFromServer: true});
Also the default minimal length for server side autocomplete is 3. You can also pass "autocompleteMinLength" to change to whatever you like:
$('.select-list').selectList({ dataURL: "http://example.com/api/GetExampleData" , autocompleteFromServer: true, autocompleteMinLength:1});
- Vertical Display *New*
If the selections are to be added vertically the option "verticalDisplay" must be set to true: $('.select-list').selectList({ verticalDisplay: true, dataURL: "http://example.com/api/GetExampleData"});
-
Previously entered data *New*
If you have previously saved data, and want to fill the control on initialization you must provide the values(ids) with the option "prevData":
$('.select-list').selectList({ prevData: [1,2,3,4,5], dataURL: "http://example.com/api/GetExampleData"});
Notes:
- Client side minimal length autocomplete is 1 and it is not configurable for now (personal choice).
- A source must be supplied when initializing the plugin or it will throw an error: "Invalid data source"
- Destroy
$('.select-list').data('selectList').destroy()
- Get final data
$('.select-list').data('selectList').getChoices() It will return an object array with the same format as the data source in the INSTALL section
$('.select-list').data('selectList').getChoicesCSV() It will return a string with the values separated by commas