Onkeyup 仅在几个字符后触发 get 请求

Question

当用户在搜索框中输入特定 ID 时，我使用 Onkeyup 触发。我试图解决的一个问题是只有在提交框中有 4 个或更多字符后才具有运行功能。例如，ID 号 0949 在用户输入每个数字时触发，每次返回 GET 请求错误，而它只应在 4 位数字提交结束时触发。这是控制台日志的屏幕截图：

我试过在我的 onkeyup 函数中包含一个 .length 以及一个失败捕获来尝试，但没有任何效果，它仍然在每次输入后触发。这是我的 JavaScript 代码：

const getAssetInfo = (assetTag, index) => {
// get the table row that this input is in
$.get("http://localhost:3000/assets/" + assetTag , (data) => {
  // find the `.description` element and set it's value 
  if (data){
    $(`#manufacturer_serial_no${index}`).val(data.serial_no);
    $(`#description${index}`).val(data.description);
    $(`#cost${index}`).val(data.cost);
    $(`#po_no${index}`).val(data.po_no);
  }
  
  console.log(data);

})

.fail(() => {
    // alert("DONE");
    // console.log(index);
    $(`#manufacturer_serial_no${index}`).val("");
    $(`#description${index}`).val("");
    $(`#cost${index}`).val("");
    $(`#po_no${index}`).val("");
}); };


$('document').ready(() => {


    // Handler to Add New Asset
    const table = $("#formTable tbody");
    let count = 1;

    $('#add').click(() => {
        
        const newRow = `
                        
                    <tr index="${count}">
                    <form>
                    <td><input class="asset-tag" id='asset_tag_no${count}' type='text' 
                    onkeyup = "getAssetInfo(this.value,${count})";
                    bottom required /></td> 
                    
                    <td><input  class="serial-no" id='manufacturer_serial_no${count}' type='text' bottom required readonly/></td>
                    <td><textarea class="description" id='description${count}' type='text' bottom required readonly description></textarea></td>
                    <td><input id='cost${count}' type='value' bottom require readonly/></td>
                    <td><input id='po_no${count}' type='text' bottom require readonly/></td>
                    <td><textarea id='remarks${count}' type='text' bottom remarks></textarea></td>
                    <td><button type="button" index="${count}" class="btn btn-danger btn-remove">X</button></td>
                    </form>
                </tr>
        `;

        table.append(newRow);
        // Handler to Remove New Asset
        $('.btn-remove').click(function(){
            let index = $(this).attr('index');
            $(`tr[index='${index}'`).remove();
        });

        count++;
    });

What is the most optimal way to ensure that only 4 or more digits can be entered into the search box, before it sends a GET request?

Answer 1

您应该能够使用 if 语句包装 getAssetInfo 函数，检查搜索栏中的字符数量。尝试像这样重写 getAssetInfo 函数：

const getAssetInfo = (assetTag, index) => {
  if (assetTag.length >= 4){
    // get the table row that this input is in
    $.get("http://localhost:3000/assets/" + assetTag , (data) => {
      // find the `.description` element and set it's value 
      if (data){
        $(`#manufacturer_serial_no${index}`).val(data.serial_no);
        $(`#description${index}`).val(data.description);
        $(`#cost${index}`).val(data.cost);
        $(`#po_no${index}`).val(data.po_no);
      }
      
      console.log(data);

    })

    .fail(() => {
        // alert("DONE");
        // console.log(index);
        $(`#manufacturer_serial_no${index}`).val("");
        $(`#description${index}`).val("");
        $(`#cost${index}`).val("");
        $(`#po_no${index}`).val("");
    });
  } else {
    console.log('not enough characters to call API endpoint');
  }
};

在这个 if 语句中，我在调用 API 之前检查搜索栏是否有 4 个或更多字符。

Onkeyup 仅在几个字符后触发 get 请求

Onkeyup to fire a get request after only a few charcters

html

javascript

ajax