Question

我们目前有两个HTML textareas'tinput'（主要）和'toutput'（次要），我们模仿主要中的输入以反映在次要中，就像有人真正在次要中键入一样。我们的想法是在辅助设备上触发“自动完成”（通过ajax）。我们有这个工作，但不是最佳。

我们已经使用minLength：3设置将JQuery UI'自动完成'（JQAC）附加到辅助设备。您可能知道，通常情况下，在输入3个字符后，JQAC会在其后“缓冲”其中的字符条目，并且不会对已输入的每个字符进行ajax调用。哪个是理想的。

然而，在我们的二次模仿中，我们已经颠覆了这种行为，不幸的是，在第三个char条目之后，JQAC ajax调用正在为每个字符后进行 - 这不是最佳的。我们知道为什么但不知道如何绕过它。我们相信我们已经颠覆了这一点，因为我们正在致电

  $('#tinput').autocomplete('search',$('#tinput').val())

在辅助句柄中的

，由JQAC的文档强制进行ajax调用。

总而言之，我们需要附加了JQAC的辅助服务器，就好像有人正在输入它并且JQAC正常运行一样。

这里有JS作为我们的char输入模拟处理（我们已经更改了这篇文章的变量名，所以请忽略拼写错误）：

$("#tinput").on('input', function (e) {
    $("#toutput").val($("#tinput").text());

    var newEvent = jQuery.Event("keypress");
    newEvent.which = e.which; // # Some key code value
    $("#toutput").trigger(newEvent);
});

$("#toutput").keypress(function(e) {

   $("#toutput").autocomplete('search',$("#toutput").val());
});

$( "#tinput" ).autocomplete({
  appendTo: "#modalparent",
  source: function( request, response ) {
    $.ajax({
      url: "https://xxxxxx",
      type: "POST",
      dataType: "json",
      data: JSON.stringify({ "ourterm": request.term}),
      success: function( data ) {
        response( $.map( data.data.suggestions, function( item ) {
          return {
            label: item,
            value: item
          };
        }));
      }
    });
  },
  minLength: 3,
  select: function( event, ui ) {
    // console.log( ui.item ?
    //   "Selected: " + ui.item.label :
    //   "Nothing selected, input was " + this.value);
  },
  open: function() {
    $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
  },
  close: function() {
    $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
  }
});

任何想法都将不胜感激。谢谢！

Answer 1

我们找到了一个优雅的解决方案。这是对我们原版的一个小修改。

将主要触发事件更改为“输入”而不是原始的“按键”。
删除辅助处理程序。

这是更新的JS：

$("#tinput").on('input', function (e) {
   $("#toutput").val($("#tinput").text());

   var newEvent = jQuery.Event("input");
   newEvent.which = e.which; // # Some key code value
   $("#toutput").trigger(newEvent);
});

并删除：

 //$("#toutput").keypress(function(e) {

 //   $("#toutput").autocomplete('search',$("#toutput").val());
 // });

DONE。

触发JQuery＆＃39;自动完成＆＃39;在次要文本区域

1 个答案: