Onkeyup to fire a get request after only a few charcters-CodePudding

I am using Onkeyup to fire when a user inputs a certain ID into the search box. One problem I am trying to fix is having the function run only after 4 or more characters are in the submission box. For example, the ID number 0949 is fired when the user types out each digit, returning a GET request error each time when it should only fire at the end of the 4 digit submission. Here is a screenshot from the console log:

Ive tried including a .length to my onkeyup function as well as a fail catch to try but nothing works and it still fires after every single input. Here is my JavaScript code:

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  id='asset_tag_no${count}' type='text' 
                    onkeyup = "getAssetInfo(this.value,${count})";
                    bottom required /></td> 
                    
                    <td><input   id='manufacturer_serial_no${count}' type='text' bottom required readonly/></td>
                    <td><textarea  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}" >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?

CodePudding user response：

You should be able to wrap your getAssetInfo function with an if statement checking the amount of characters in the searchbar. Try rewriting the getAssetInfo function like this:

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

In this if statement, I'm checking if the search bar has 4 or more characters before making the API call.