jQuery - проблема автозаполнения пользовательского интерфейса

Question

Использование jQ UI Autocomplete с несколькими значениями

Моя функция выглядит так

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;
    }
});

Я пытаюсь добиться того, чтобы пользователь ограничивал выбор только серверных данных. Я имею в виду, я хочу добавить термин в поле ввода, только если есть какой-либо результат со стороны PHP. Иначе, уведомите пользователя, что на сервере нет данных, как этот термин

Например

Я хочу предотвратить добавление слов, как sdsf (в этом случае сервер отвечает как []). Другими словами, добавьте ТОЛЬКО если есть хотя бы 1 предложение со стороны сервера. Еще остаётся как есть и уведомляю пользователя о проблеме.

Это возможно? Как мне достичь этого результата?

Answer 1

Попробуйте Tokeninput. Это именно то, что вы пытаетесь сделать.

Кроме того, вот демо, чтобы убедиться, что это то, что вы хотите...

Answer 2

Ну, то, как они делают это, они обменивают тег на промежуток.

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

Вы должны сделать так, чтобы предложения были добавлены до того как

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

Конечно, вы должны сначала получить предложения и все.