jQuery：强制用户从textarea中的自动完成建议中选择一个值

Question

我正在使用此代码段让用户从城市列表中进行选择，并将它们插入textarea中，以逗号分隔。这很有效。

我想达到这个目标：用户写一部分城市名称进行搜索，类似于组合框，但如果他没有选择其中一个选项并离开该字段，则插入的数据应该被删除。

因此，简单地说，我想在提交表单之前实施一种验证，以防止用户使用不是完整城市名称的字符串填充字段。

有什么想法吗？

谢谢！

jQuery( function() {
    var availableTags = [
"Agliè (TO)",
"Airasca (TO)",
//--- the other cities list ---
    ];
    function split( val ) {
      return val.split( /,\s*/ );
    }
    function extractLast( term ) {
      return split( term ).pop();
    }

    jQuery( 'textarea[data-wpt-id=wpcf-comuni-caldo],textarea[data-wpt-id=wpcf-comuni-freddo],textarea[data-wpt-id=wpcf-comuni-alta-potenza]' )
    //,input[name=wpv-wpcf-comuni-caldo],input[name=wpv-wpcf-comuni-freddo],input[name=wpv-wpcf-comuni-alta-potenza]
      // don't navigate away from the field on tab when selecting an item
      .on( "keydown", function( event ) {
        if ( event.keyCode === jQuery.ui.keyCode.TAB &&
            jQuery( this ).autocomplete( "instance" ).menu.active ) {
          event.preventDefault();
        }
      })
      .autocomplete({
        minLength: 0,
        source: function( request, response ) {
          // delegate back to autocomplete, but extract the last term
          response( jQuery.ui.autocomplete.filter(
            availableTags, extractLast( request.term ) ) );
        },
        focus: function() {
          // prevent value inserted on focus
          return false;
        },
        autoFill:true,
        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;
        }
      });
  } );

Answer 1

我自己解决了这个问题，如下所示。

jQuery( function() {
var availableTags = [
"Agliè (TO)",
"Airasca (TO)",
//--- the other cities list ---
];
function split( val ) {
      return val.split( /,\s*/ );
    }
    function extractLast( term ) {
      return split( term ).pop();
    }

    var valoreAttuale = "";
    jQuery( 'textarea[data-wpt-id=wpcf-comuni-caldo],textarea[data-wpt-id=wpcf-comuni-freddo],textarea[data-wpt-id=wpcf-comuni-alta-potenza]' ).focus(function() { //al primo click nel campo, memorizzo le città attuali
      valoreAttuale = jQuery(this).val();
      console.log(valoreAttuale);
    });

    jQuery( 'textarea[data-wpt-id=wpcf-comuni-caldo],textarea[data-wpt-id=wpcf-comuni-freddo],textarea[data-wpt-id=wpcf-comuni-alta-potenza]' )
    //,input[name=wpv-wpcf-comuni-caldo],input[name=wpv-wpcf-comuni-freddo],input[name=wpv-wpcf-comuni-alta-potenza]
      // don't navigate away from the field on tab when selecting an item
      .on( "keydown", function( event ) {
        if ( event.keyCode === jQuery.ui.keyCode.TAB &&
            jQuery( this ).autocomplete( "instance" ).menu.active ) {
              event.preventDefault();
        }
      })
      .autocomplete({
        minLength: 0,
        source: function( request, response ) {
          // delegate back to autocomplete, but extract the last term
          response( jQuery.ui.autocomplete.filter(
            availableTags, extractLast( request.term ) ) );
        },
        focus: function() {
          // prevent value inserted on focus
          return false;
        },
        autoFill:true,
        change: function (event, ui)
        {
        if (!ui.label) { this.value = valoreAttuale; }
        },
        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( ", " );
          valoreAttuale = jQuery(this).val();
          console.log(valoreAttuale);
          return false;
        }
      });
  } );

1. 我将当前值（valoreAttuale）保存在焦点上;
2. 如果用户选择建议值，则会将其添加到textarea并更新valoreAttuale;如果用户输入任何其他内容（不在数组中），jQuery将恢复该字段的先前值（valoreAttuale）。