javascript - 如何阻止 JQuery UI 自动完成清除以前的条目？

Question

我刚刚学习使用 JQuery UI 的自动完成功能，并使用它向模型的 tag_list 属性添加标签。但是，当我从选项列表中选择一个标签时，它会删除输入字段中的所有先前值。

如何将所选标签附加到输入字段中的逗号分隔标签列表而不是覆盖它？

谢谢

#  Autocomlete Peice Tags
    $( "#search_tag_list" ).autocomplete({
      source: $( "#search_tag_list" ).data('autocomplete-source') #get url from html data attribute
    });

CoffeeScript :

#  Autocomlete Search Tagss
    split = ( val ) ->
      return val.split( /,\s*/ );


    extractLast = ( term ) ->
      return split( term ).pop();


    extractWithoutLast = ( term ) ->
      term = split( term );
      term.pop();
      return term;


    $( "#search_tag_list" )
#   don't navigate away from the field on tab when selecting an item
    .bind( "keydown", ( event ) ->
      if ( event.keyCode == $.ui.keyCode.TAB && $( this ).autocomplete( "instance" ).menu.active )
        event.preventDefault();
      )
    .autocomplete({
      source: ( request, response ) ->
        $.getJSON( $( "#search_tag_list" ).data('autocomplete-source'),
          {
            term: extractLast( request.term ),
#           exclude already selected values:
            exclude: extractWithoutLast( request.term )
          },
          response
        );
      ,
      search: ->
#       custom minLength
        term = extractLast( this.value );
        if ( term.length < 2 )
          return false;
      ,
      focus: ->
#       prevent value inserted on focus
        return false;
      ,
      select: ( event, ui ) ->
        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;
    });

Answer 1

您仅使用自动完成插件的默认功能。

遵循 Autocomplete widget Docs您必须将小部件设置为在自动完成字段中显示多个标签/值:

(进行了一些调整，以防止已选择的标签再次出现在搜索结果中)

PHP:

<?php

    $array = array("foo", "bar", "hello", "world");

    $term = trim($_GET['term']);
    // filter the array:
    $array = preg_grep("/$term/", $array);
    // check if there's anything to exclude:
    if(isset($_GET['exclude'])){
         // remove already selected values:
         $array = array_diff( $array, $_GET['exclude'] );
    }

    echo json_encode($array);

?>

脚本: ( Autocomplete widget Docs )

    function split( val ) {
        return val.split( /,\s*/ );
    }

    function extractLast( term ) {
        return split( term ).pop();
    }

    function extractWithoutLast( term ) {
        var term = split( term );
        term.pop();
        return term;
    }

    $( "#search_tag_list" )
        // don't navigate away from the field on tab when selecting an item
        .bind( "keydown", function( event ) {
        if ( event.keyCode === $.ui.keyCode.TAB && $( this ).autocomplete( "instance" ).menu.active ) {
            event.preventDefault();
        }
    })
    .autocomplete({
        source: function( request, response ) {
            $.getJSON( $( "#search_tag_list" ).data('autocomplete-source'), {
                term: extractLast( request.term ),
                // exclude already selected values:
                exclude: extractWithoutLast( 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;
        }
    });