Question

Using jQ UI Autocomplete with multiple values

My function looks like that

mailto_input.bind( "keydown", function( event ) {
    if ( event.keyCode === $.ui.keyCode.TAB && $( this ).data( "autocomplete" ).menu.active ) {
        event.preventDefault();
    }
}).autocomplete({
    source: function( request, response ) {
        $.getJSON( "core/search.php", {
            term: extractLast( request.term )
        }, response );
    },
    search: function(){
        // custom minLength
        var term = extractLast( this.value );
        if ( term.length < 2 ) {
            return false;
        }
    },
    focus: function() {
        // prevent value inserted on focus
        return false;
    },
    select: function( event, ui ) {
        var terms = split( this.value );
        // remove the current input
        terms.pop();
        // add the selected item
        terms.push( ui.item.value );
        // add placeholder to get the comma-and-space at the end
        terms.push( "" );
        this.value = terms.join( "; " );
        return false;
    }
});

What I’m trying to achieve is, to limit user to select only serverside data. I mean, I want to add term into input box ONLY if there is any result from PHP side. Else, notify user that, there is no data in server like this term

For ex.

I want to prevent adding words like sdsf (in this case server responds like []). In other words, add ONLY if there is at least 1 suggestion from serverside. Else stay as it was and notify user about issue.

Is that possible? How can I achieve this result?

Answer 1

Have a go at Tokeninput. It does exactly what you are trying to do.

Also, here’s the demo just to make sure it’s what you want…