javascript - jQuery - UI 自动完成问题

Question

使用具有多个值的 jQ UI 自动完成

我的功能看起来像这样

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

当然，您必须首先获得建议和一切。