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

Question

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

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

谢谢

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

咖啡脚本：

#  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 之后，您必须将小部件设置为在自动完成字段中显示多个 tags/values：

（稍作调整以防止已选择的标签再次出现在搜索结果中）

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

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

How to stop JQuery UI Autocomplete from clearing previouse entries?

javascript

jquery

jquery-ui

autocomplete