Question

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

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

由于

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

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

1 个答案: