CODEWITHSUNDEEP
javascriptjqueryjquery-uiautocompletegetjson
heron
heron

Reputation: 3661

jQuery - UI autocomplete issue

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.

enter image description here

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?

Upvotes: 0

Views: 288

Answers (2)

PitaJ
PitaJ

Reputation: 15012

Well, the way they do it is they exchange the tag for a span.

<div id="taginput">
    <span id="tags">
    <span>tagname</span>
    </span>
    <input type="text" id="tagtext"/>
</div>

You have to make it so the suggestions are added before as spans:

$('.suggestion_element_class').click(function() {
    textof = this.text();
    $('#tags').append('<span>' + textof + '</span>');
    $('#tagtext').val('');
});

Of course, you would have to get the suggestions first and everything.

Upvotes: 0

evancohen
evancohen

Reputation: 677

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...

Upvotes: 1

Related Questions