запуск JQuery 'автозаполнения' во вторичном текстовом поле

Question

В настоящее время у нас есть две текстовые области HTML (первичная) и «toutput» (вторичная), где мы имитируем входные данные в первичном, чтобы отражаться на вторичном, как будто кто-то действительно набрав второе. Идея состоит в том, чтобы вызвать «автозаполнение» (над ajax) на вторичной основе. У нас это работает, но не оптимально.

Мы подключили JQuery UI 'Autocomplete' (JQAC) к вторичной системе с минимальной длиной: 3 набора. Вы можете знать, что, как правило, после ввода трех символов JQAC «буферизирует» записи символов после этого и не делает аякс-вызов для каждого введенного символа. Это идеальный вариант.

Однако, с нашим вторичным подражанием, мы, к сожалению, подорвали это поведение, когда после третьей записи char для каждого символа создается JQAC-ajax-вызов, который не является оптимальным. Мы знаем почему, но не знаем, как обойти это. Мы полагаем, что мы извращаться это потому, что мы называем

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

в ключевой ручке вторичной, которая по документации JQAC вынуждает вызов Ajax.

Подводя итог, нам нужно, чтобы вторичное устройство, к которому привязано JQAC, должно было вести себя так, как будто кто-то действительно вводил в него текст, а JQAC вел себя нормально.

Вот JS для того, что мы имеем в нашем входе полукокса имитируют обработки (мы изменили имена переменных на этот пост так пожалуйста игнорируют опечаток):

$("#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

Мы нашли элегантное решение. Это была незначительная модификация нашего оригинала.

1. изменить событие триггера первичным на «ввод» вместо исходного «нажатия».
2. удалить обработчик для вторичного устройства.

здесь обновлённые 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.