jQuery：强制用户 select 文本区域中自动完成建议的值

Question

我正在使用此代码段让用户从城市列表中进行选择，并将它们插入到文本区域中，以逗号分隔。行得通。

我想达到这个objective：用户写了一部分城市名称来搜索它，类似于组合框，但如果他不select其中之一选项并离开该字段，插入的数据应被删除。

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

有什么想法吗？

谢谢！

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

我将当前值 (valoreAttuale) 保存在焦点上；
如果用户选择一个建议值，该值将被添加到文本区域并更新 valoreAttuale；如果用户键入任何其他内容（不在数组中），jQuery 恢复字段的先前值 (valoreAttuale)。

jQuery：强制用户 select 文本区域中自动完成建议的值

jQuery: force a user to select a value from the autocomplete suggest in a textarea

javascript

jquery

autocomplete

jquery-ui-autocomplete