jQuery Tokeninput event on No results

Question

I'm using jQuery Tokeninput as a way to add authors on a book creating page.

If the entered author exists in the database it will show in a dropdown as a clickable token. If, however, there are no results found, the dropdown will show only a message informing the user their query yeilded no results. What I would like is for Tokeninput to provide a clickable option in the dropdown on No results, instead of just showing a message.

Because my Tokeninput field serves only to find existing authors. If a user enters a name that does not yet exist, I would like to offer an option to create him/her now. So, instead of just having a message saying "No results found", I would like to have a clickable option along the lines of "Entered author does not yet exist. Add 'name surname' now?" which then shows a non-Tokeninput form for adding a new author.

Tokeninput source code:
https://github.com/loopj/jquery-tokeninput/blob/master/src/jquery.tokeninput.js

Answer 1

I would look at enabling Free Tagging, and making use of the onFreeTaggingAdd callback, so that you can use the search query the user has already typed into the TokenInput, and save them typing it in twice.

This additionally has the plusside of allowing a user to create a new author that may be a substring of an existing author. (e.g. Chris Smith, Chris Smithson)

Something a little bit like this:

$(document).ready(function() {
    $("#my-text-input").tokenInput("/url/to/your/script/", {
        allowFreeTagging: true,
        noResultsText: "Author not recognised, hit enter to add",
        onFreeTaggingAdd: addNewAuthor(hiddenInput, token)
    });
});

function addNewAuthor(hiddenInput, token) {
    //Insert form-launching code here, using the author name in the token parameter
}

N.B. Ensure you are using the latest version of the plug-in from Github for freetagging functionality, the version on loopj.com is outdated.