Add list of options to jquery tags input lib
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I am using this library for tag inputs. I want the user to click and see predefined options instead or in conjunction with typing. This way we can normalize inputs if possible and if not we end up taking their inputs. So I suppose I need 3 states

1-Type anything - as it is now
2-Choose from list
3-Choose from list or type anything

http://xoxco.com/projects/code/tagsinput/

Ideally I end up with an added js file and some added handler for a class to toggle the functions needed. the suggested list wont be long (up to 10 things) so dont worry with managing lots of things here.

Something like http://textextjs.com/ ?
tomtoump over 4 years ago
if it showed the options as soon as you click, yes
Qdev over 4 years ago
awarded to Wikimedia
Tags
jQuery

Crowdsource coding tasks.

4 Solutions


Is this what you want?

Or maybe this this?
tomtoump over 4 years ago
The first one is right, now i just need it to work with the tagsinput js lib
Qdev over 4 years ago
Why do you want to use that library?
tomtoump over 4 years ago
only reason is its already in use in the system im working on and didnt want to end up with multiple tag systems and then have to work out ui differences in them.
Qdev over 4 years ago
The thing is that what I posted is a complete solution, for both the tags and the autocomplete.
tomtoump over 4 years ago

I think this is what you want .


Have a look at this: http://timschlechter.github.io/bootstrap-tagsinput/examples/

Typeahead is not included in Bootstrap 3, so you'll have to include your own typeahead library. I'd recommed typeahead.js. An example of using this is shown below.

<input type="text" value="Amsterdam,Washington" data-role="tagsinput" />
<script>
var citynames = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  prefetch: {
    url: 'assets/citynames.json',
    filter: function(list) {
      return $.map(list, function(cityname) {
        return { name: cityname }; });
    }
  }
});
citynames.initialize();

$('input').tagsinput({
  typeaheadjs: {
    name: 'citynames',
    displayKey: 'name',
    valueKey: 'name',
    source: citynames.ttAdapter()
  }
});
</script>

Also, it can fetch remote JSON. Examples are here: http://twitter.github.io/typeahead.js/examples/

There's also an unofficial port of the Bootstrap 2 typeahead plugin: https://github.com/bassjobsen/Bootstrap-3-Typeahead
( An example )

In xoxco github repo there's an open pull request that should bring in the typeahead support: https://github.com/xoxco/jQuery-Tags-Input/pull/98
dekkard over 4 years ago

Here is my solution which aims to meet all your requests: an added js file (which works with http://xoxco.com/projects/code/tagsinput/) that handles the 3 states you want.

you can download the additional js file here. note that it uses jquery-ui's autocomplete plugin so you will have to include jquery-ui.

<!-- jQuery-ui -->
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/start/jquery-ui.css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

<!-- Autocomplete Extension: must be placed after the jquery.tagsinput plugin and before you load any tagsInput({ ... }) -->
<script type="text/javascript" src="tagsinput-autocomplete-extension.js"></script>

download the example to see how it's used.


The issue with this setup is that if there is an update to the tagsinput plugin, and you choose to update, this solution will possibly also need updating. Furthermore, this solution has to do some ugly overriding in order to force tags.

A nicer alternative would be to re-write the tagsinput plugin so that it supports the 3 states you want. However, at that point, you might as well use one of the other tag plugins suggested by tomtoump/laomo/dekkard.

View Timeline