Bootstrap su Twitter: funzione Typeahead per nessuna corrispondenza

Question

Ho un modulo 'aggiungi nuova cosa' che associa un 'utente' a una 'cosa'.

Sto utilizzando Twitter Bootstrap Typeahead per fornire un elenco di utenti durante la digitazione.
Funziona bene, se un utente è nella lista, posso selezionarlo.

Ma se l'utente non esiste, mi piacerebbe creare un collegamento per 'creare un nuovo utente'.

Quindi, in pratica, ho bisogno di qualche forma di funzione 'nessuna corrispondenza' da qualche parte nello .typeahead(). Non riesco a risolverlo.

Answer 1

Estendere la classe typeahead:

var newusertext = 'New user'; 
var newuserlink = '/add/user/0'; 

$.fn.typeahead.Constructor.prototype.process = function (items) { 
     var that = this 

     items = $.grep(items, function (item) { 
     return that.matcher(item) 
     }) 

     items = this.sorter(items) 

     if (!items.length) { 
     return this.rendernonmatch().show() 
     } 

     return this.render(items.slice(0, this.options.items)).show() 
    } 


$.fn.typeahead.Constructor.prototype.rendernonmatch = function() { 
     var that = this 
     var items = new Array(); 
     items.push(newusertext) 
     items = $(items).map(function (i, item) { 
     i = $(that.options.item).attr('data-value', item) 
     i.find('a').html(that.highlighter(item)) 
     return i[0] 
     }) 
     items.first().addClass('active') 
     this.$menu.html(items) 
     return this 
    } 

/* redirect to the registration page to add a new user */  
$.fn.typeahead.Constructor.prototype.updater = function (item) { 
     if(item === newusertext){ window.location = newuserlink; return} 
     return item 
    }  

See: http://bootply.com/66630

Answer 2

ho usato il typeahead NOTFOUND 'template' opzione, da lì ho potuto impostare un pulsante di collegamento che per me è più accessibile . impostazioni typeahead:

$('#remote .typeahead').typeahead({ 
    hint: true, 
    highlight: true, 
    minLength: 2 
    }, 
    { 
    name: 'sn-tags', 
    display: 'tag', 
    source: oBusqTags, //Bloodhound object 
    templates: { 
     notFound: '<p>No matches<br><a id="btnAddNewTag" href="#">Add New Tag</a></p>' 
    } 
}).bind("typeahead:select", function(obj, datum, name) { 
    //add selection as an option on a select element 
    $('#lbxAddTag').append($('<option>', { 
    value: datum.id, 
    text: datum.tag 
    })); 
}); 

Questo è l'ascoltatore per quel link:

$('#remote').on('click', '#btnAddNewTag', function(e){ 
    $('#lbxAddTag').append($('<option>', { 
     value: "0", 
     // this is tricky, as there aren't any matches then 
     // $('#remote .typeahead').typeahead('val') contains '', 
     // so i had to set an id for the typeahead input text box and 
     // 'manually' get its value 
     text: $('#tbxBusqTag').val() 
    })); 
    // as the text is already added as a select option 
    // i clean the typeahead input box 
    $('#remote .typeahead').typeahead('val',''); 
    e.preventDefault(); 
});