laravel - 数据表在按下回车键时实现 ajax答案

【问题标题】：laravel - datatables implement ajax on enter key pressedlaravel - 数据表在按下回车键时实现 ajax
【发布时间】：2018-06-23 05:25:13
【问题描述】：

由于我使用数据表并且有一个 cluomn countains 输入文本，所以我想使用 ajax 并仅在按下 Enter 键时获取有关此输入字段的一些数据，我尝试了很多 sloutions 但没有和我一起工作，如果我使用模糊或聚焦工作正常但需要这个只在输入时

datatable:

  {data: 'vendor_name', name: 'vendors.vendor_name',mRender: function (data, type, row) {                   
return '<input type="text" id="vendor_name" 
   class="vendor_name" data-id="'+row.id+'" onkeydown="myFunction(event)" 
     onClick="this.select();"  value="'+data+'">';}},

javascript

 <script type="text/javascript">
  function myFunction(event) {
 var x = event.keyCode;
var id = $(this).data("id");
 var $row = $(this).closest('tr');
   if (x == 13) 
 { 
    $.ajax({
        type: 'POST',
        url: 'Vendor_Save',
        data: {
            '_token': $('input[name=_token]').val(),
            'currentid': id,
           'current_vendor_name':$(this).val(),
        },
        success: function(data) {
       $row.closest('tr').find('.category_name').val(data.categoryname); 
     $row.closest('tr').find('.vendor_no').val(data.vendorid);                        
        }
     });
     }
        };
    </script>

【问题讨论】：

标签： javascript jquery ajax laravel datatables

【解决方案1】：

我会推荐使用 axios，甚至是 vue js，而不是纯 ajax！

您可以在字段的输入中设置一个事件侦听器，并使用keyup 来触发请求。

var input = document.getElementById("idofyourinput");
input.addEventListener("keyup", function(){
    alert("KeyUp"); // Take out after testing
    $.ajax({
        type: 'POST',
        url: 'Vendor_Save',
        data: {
            '_token': $('input[name=_token]').val(),
            'currentid': id,
           'current_vendor_name':$(this).val(),
        },
        success: function(data) {
            var row = $(input).closest('tr');
            $row.closest('tr').find('.category_name').val(data.categoryname); 
            $row.closest('tr').find('.vendor_no').val(data.vendorid);                        
        }
    });
});

&lt;input type="text" id="idofyourinput"/&gt;

【讨论】：